/* Sitewide palette. Single source of truth: chrome.css loads via partials/head*.html,
   which is included AFTER page-level <style> blocks and after blog.css, so these win.
   Do not redeclare these in page <style> blocks.
   --rand is deliberately NOT here: it differs per context (dark pages #2A2A2A,
   ophaalbon #D0D0D0, blog #E7E7E7) and stays declared locally. */
:root {
    --zwart: #0A0A0A;
    --geel: #F5C518;
    --staal: #3D3D3D;
    --wit: #F8F8F8;
    --rood: #D32F2F;
    --groen: #2E7D32;
}

/* SPOED BANNER */
.spoed {
    background: var(--rood);
    color: var(--wit);
    text-align: center;
    padding: 14px 24px;
    font-weight: 700;
    font-size: 0.95rem;
}
.spoed a { color: var(--wit); text-decoration: underline; }
.spoed .phone-inline {
    background: transparent;
    border: none;
    color: var(--wit);
    text-decoration: underline;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
.spoed .phone-inline:hover { color: var(--geel); }

/* TYPOGRAPHY */
body h1, body h2, body h3 {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.05;
}
body h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
body h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); margin-bottom: 1.5rem; }
body h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
body h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* NAV */
body > nav {
    position: sticky;
    top: 0;
    background: var(--zwart);
    color: var(--wit);
    z-index: 100;
    border-bottom: 3px solid var(--geel);
    padding: 0;
}
nav .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    max-width: 1400px;
    margin: 0 auto;
}
nav .brand {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.8rem;
    color: var(--geel);
    letter-spacing: 0.05em;
    text-decoration: none;
}
nav .nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 0.95rem;
}
nav .nav-links a {
    color: var(--wit);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0;
    border: 0;
}
nav .nav-links a:hover { color: var(--geel); background: transparent; }
/* De balk is sticky, dus een anker landt zonder dit onder de balk en mist de
   visitor precies de kop waar hij naartoe klikte. Alleen op :target, want het
   geldt pas op het moment dat er echt naar gesprongen wordt. 90px dekt ook
   mobiel, waar de reviewstrook de balk een rij hoger maakt. */
:target { scroll-margin-top: 90px; }
nav .nav-actions { display: flex; align-items: center; gap: 10px; }
/* Google rating badge. Hand-maintained: the score and count live in the nav
   partials, same numbers as the reviews section on the homepage. */
nav .nav-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--wit);
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}
nav .nav-rating:hover { border-color: var(--geel); }
/* The svg also carries width/height attributes: this file is cached for an
   hour and unfingerprinted, so the badge has to survive arriving before it. */
nav .nav-rating svg { display: block; width: 14px; height: 14px; flex: none; }
nav .nav-rating .nr-stars { color: var(--geel); font-size: 0.78rem; letter-spacing: 0.04em; }
nav .nav-rating .nr-score { font-weight: 700; color: var(--geel); }
/* Mobile counterpart: the bar has no horizontal room left at 360px, so the
   rating gets its own full-width row under it instead. Shown exactly where
   .nav-rating hides, so one of the two is always on screen. */
nav .nav-rating-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 24px;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.2;
    color: #D9D9D9;
    text-decoration: none;
}
nav .nav-rating-bar svg { display: block; width: 13px; height: 13px; flex: none; }
nav .nav-rating-bar .nr-stars { color: var(--geel); letter-spacing: 0.04em; }
nav .nav-rating-bar .nr-score { color: var(--geel); font-weight: 700; }
nav .nav-cta {
    background: var(--geel) !important;
    color: var(--zwart) !important;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
}
nav .nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
    margin-left: 4px;
}
nav .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--wit);
    margin: 5px 0;
    transition: transform .2s, opacity .2s;
}
nav .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav .nav-toggle.open span:nth-child(2) { opacity: 0; }
nav .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Language switcher: one compact dropdown at every width. The trigger shows the
   active language code + caret; the menu is the four languages stacked, each
   with a flag. Used to be inline buttons above 1350px, but two shapes for one
   control meant the desktop version was the odd one out, and the inline row
   crowded the top bar next to Groepsdeals. */
nav .lang-switch { position: relative; margin-left: 4px; }
nav .lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: var(--wit);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 2px;
    cursor: pointer;
}
nav .lang-trigger:hover { border-color: var(--geel); color: var(--geel); }
nav .lang-trigger .lang-caret { font-size: 0.6rem; transition: transform .15s; }
nav .lang-switch.open .lang-trigger { border-color: var(--geel); color: var(--geel); }
nav .lang-switch.open .lang-trigger .lang-caret { transform: rotate(180deg); }
nav .lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    flex-direction: column;
    gap: 4px;
    background: var(--zwart);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    padding: 6px;
    min-width: 176px;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    z-index: 200;
}
nav .lang-switch.open .lang-menu { display: flex; }
nav .lang-menu [data-lang] {
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    font-size: 0.8rem;
    border-color: transparent;
    white-space: nowrap;
}
nav .lang-name { display: inline; font-weight: 600; text-transform: none; opacity: .85; }
/* Flag icon before each language. Inline SVG data-URIs so they render
   identically on every OS, unlike emoji flags, which Windows shows as letter
   boxes. */
nav .lang-menu [data-lang]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-right: 9px;
    vertical-align: -2px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}

/* Below 1100px the desktop nav still fits in a row but starts to crowd —
   shrink the link + CTA fonts so Groepsdeals + Beta-tag + the rest don't
   push into the brand. */
@media (max-width: 1100px) {
    nav .nav-links { font-size: 0.75rem; }
    nav .nav-links a { font-size: 0.75rem; }
    nav .nav-cta { font-size: 0.75rem; }
    nav .nav-cta-extra { display: none; }
    /* Below this the bar is already shrinking its own type to fit, so the badge
       moves out of the bar and onto its own row underneath. */
    nav .nav-rating { display: none; }
    nav .nav-rating-bar { display: flex; }
}

@media (max-width: 900px) {
    nav .nav-toggle { display: block; }
    nav .brand { font-size: 1.5rem; }
    nav .nav-cta { padding: 6px 10px; }
    nav .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--zwart);
        flex-direction: column;
        /* De desktopregel zet align-items:center; in het hamburgermenu zorgt dat
           voor shrink-to-fit items die gecentreerd staan. Alles links uitlijnen. */
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 16px;
        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 3px solid var(--geel);
    }
    nav .nav-links.open { display: flex; }
    nav .nav-links a {
        padding: 14px 4px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        font-size: 15px;
    }
    nav .nav-links a:last-child { border-bottom: 0; }
}

nav .lang-menu [data-lang="nl"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5IDYnPjxyZWN0IHdpZHRoPSc5JyBoZWlnaHQ9JzYnIGZpbGw9JyMyMTQ2OEInLz48cmVjdCB3aWR0aD0nOScgaGVpZ2h0PSc0JyBmaWxsPScjRkZGJy8+PHJlY3Qgd2lkdGg9JzknIGhlaWdodD0nMicgZmlsbD0nI0FFMUMyOCcvPjwvc3ZnPg=="); }
nav .lang-menu [data-lang="en"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA2MCAzMCc+PGNsaXBQYXRoIGlkPSd0Jz48cGF0aCBkPSdNMzAsMTUgaDMwIHYxNSB6IHYxNSBoLTMwIHogaC0zMCB2LTE1IHogdi0xNSBoMzAgeicvPjwvY2xpcFBhdGg+PHBhdGggZD0nTTAsMCB2MzAgaDYwIHYtMzAgeicgZmlsbD0nIzAxMjE2OScvPjxwYXRoIGQ9J00wLDAgTDYwLDMwIE02MCwwIEwwLDMwJyBzdHJva2U9JyNmZmYnIHN0cm9rZS13aWR0aD0nNicvPjxwYXRoIGQ9J00wLDAgTDYwLDMwIE02MCwwIEwwLDMwJyBjbGlwLXBhdGg9J3VybCgjdCknIHN0cm9rZT0nI0M4MTAyRScgc3Ryb2tlLXdpZHRoPSc0Jy8+PHBhdGggZD0nTTMwLDAgdjMwIE0wLDE1IGg2MCcgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEwJy8+PHBhdGggZD0nTTMwLDAgdjMwIE0wLDE1IGg2MCcgc3Ryb2tlPScjQzgxMDJFJyBzdHJva2Utd2lkdGg9JzYnLz48L3N2Zz4="); }
nav .lang-menu [data-lang="fr"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjxyZWN0IHdpZHRoPSczJyBoZWlnaHQ9JzInIGZpbGw9JyNFRDI5MzknLz48cmVjdCB3aWR0aD0nMicgaGVpZ2h0PScyJyBmaWxsPScjZmZmJy8+PHJlY3Qgd2lkdGg9JzEnIGhlaWdodD0nMicgZmlsbD0nIzAwMjM5NScvPjwvc3ZnPg=="); }
nav .lang-menu [data-lang="es"]::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzIDInPjxyZWN0IHdpZHRoPSczJyBoZWlnaHQ9JzInIGZpbGw9JyNBQTE1MUInLz48cmVjdCB5PScwLjUnIHdpZHRoPSczJyBoZWlnaHQ9JzEnIGZpbGw9JyNGMUJGMDAnLz48L3N2Zz4="); }

/* BRANCHES GRID */
.branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 18px;
    margin-top: 2rem;
}
.branch-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E7E7E7;
    border-radius: 6px;
    padding: 24px;
    transition: border-color .15s, transform .15s;
    text-decoration: none;
    color: var(--zwart);
}
.branch-card:hover { border-color: var(--geel); transform: translateY(-2px); }
.branch-card .eyebrow {
    display: inline-block;
    background: var(--geel);
    color: var(--zwart);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 12px;
    align-self: flex-start;
}
.branch-card h3 {
    font-size: 1.5rem;
    margin: 0 0 .5rem;
    font-family: 'Bebas Neue', Impact, sans-serif;
}
.branch-card p { font-size: 14px; color: #555; margin: 0 0 14px; line-height: 1.55; }
.branch-card .arrow { margin-top: auto; font-weight: 700; color: var(--zwart); font-size: 14px; }

/* FOOTER */
footer {
    background: #050505;
    color: #888;
    padding: 48px 24px 24px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 0;
}
footer .brand {
    display: block;
    margin-bottom: 12px;
    color: var(--geel);
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 1.4rem;
    letter-spacing: .05em;
    text-decoration: none;
}
footer .meta {
    color: #666;
    margin-top: 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
}
footer .badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
    color: var(--geel);
    font-weight: 700;
    font-size: 0.85rem;
}
footer .footer-links {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 18px 0 4px;
}
footer .footer-links a {
    color: #BBB;
    font-size: 0.85rem;
    text-decoration: none;
}
footer .footer-links a:hover { color: var(--geel); background: transparent; }
.hidden { display: none !important; }
a[href^="/blog/"]:not([href="/blog/"]):not([href="/blog"]) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--geel);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a[href^="/blog/"]:not([href="/blog/"]):not([href="/blog"]):hover {
    color: var(--zwart);
    background: var(--geel);
}

/* ==========================================================================
   Kaarten en knopvarianten, verplaatst uit de losse <style>-blokken op
   2026-08-18. Deze regels stonden identiek op tientallen paginas, waardoor
   elke visuele wijziging een bewerking per pagina werd.

   chrome.css laadt na die blokken, dus wat hier staat wint. Zet deze klassen
   dus niet opnieuw in een pagina, en gebruik voor een uitzondering een
   specifiekere selector.

   .btn zelf staat hier bewust NIET: die heeft per pagina responsive
   overrides in @media, en die zouden het van deze regels verliezen.
   ========================================================================== */

/* --- stappen --- */
.stapkaart { border: 2px solid var(--zwart); border-top: 6px solid var(--geel); padding: 24px; background: var(--wit); position: relative; }
.stapkaart h3 { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: normal; line-height: inherit; font-size: 1.15rem; margin-bottom: 0.5rem; }
.stapkaart h3, .stapkaart h4 { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: normal; line-height: inherit; font-size: 1.15rem; margin-bottom: 0.5rem; }
.stapkaart-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem; color: var(--geel); line-height: 1; margin-bottom: 8px; text-shadow: 2px 2px 0 var(--zwart); }
.stapkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 2rem; }

/* --- cards --- */
.cat-card { display: flex; flex-direction: column; background: #FAFAFA; border: 2px solid var(--zwart); border-left: 6px solid var(--geel); padding: 26px; transition: transform .15s, box-shadow .2s; }
.cat-card .cat-link { margin-top: 12px; font-weight: 700; color: var(--zwart); border-bottom: 2px solid var(--geel); align-self: flex-start; padding-bottom: 2px; }
.cat-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.cat-card p { flex: 1; color: var(--staal); font-size: 0.95rem; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,.1); }
.cat-card:hover .cat-link { color: var(--rood); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin-top: 2rem; }

/* --- cyclus --- */
.cyclus { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 2rem; }
.fase { border: 2px solid var(--zwart); border-top: 6px solid var(--geel); background: #FAFAFA; padding: 26px; }
.fase .fase-num { font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--staal); margin-bottom: 6px; display: block; }
.fase h3 { font-size: 1.4rem; }
.fase p { color: var(--staal); font-size: .95rem; margin-bottom: 0; }

/* --- kenmerken --- */
.kenmerk { background: var(--wit); border: 2px solid var(--zwart); border-left: 6px solid var(--geel); padding: 24px; }
.kenmerk h3 { font-size: 1.3rem; margin-bottom: 8px; }
.kenmerk p { color: var(--staal); font-size: .95rem; margin-bottom: 0; }
.kenmerken { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin-top: 2rem; }

/* --- prijs-dienst --- */
.prijs-dienst { background: var(--wit); border: 3px solid var(--zwart); padding: 28px; position: relative; display: flex; flex-direction: column; }
.prijs-dienst .tag { position: absolute; top: -12px; right: 20px; background: var(--geel); color: var(--zwart); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.prijs-dienst .vanaf { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1; color: inherit; margin-bottom: 12px; }
.prijs-dienst .vanaf small { display: block; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 400; line-height: 1.4; margin-top: 8px; opacity: .85; }
.prijs-dienst li { padding: 4px 0; }
.prijs-dienst li::before { content: "→ "; color: var(--geel); font-weight: 700; }
.prijs-dienst ul { list-style: none; padding: 0; margin: 8px 0 16px; font-size: .93rem; }
.prijs-dienst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-top: 2rem; }
.prijs-dienst.featured { background: var(--zwart); color: var(--wit); border-color: var(--geel); }
.prijs-dienst.featured h3 { color: var(--geel); }

/* --- prijs-tarief --- */
.prijs-tarief { background: var(--wit); color: var(--zwart); padding: 32px; border: 3px solid var(--geel); position: relative; }
.prijs-tarief .tag { position: absolute; top: -12px; right: 20px; background: var(--geel); color: var(--zwart); font-size: 0.75rem; font-weight: 700; padding: 4px 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.prijs-tarief .vanaf { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--zwart); margin: 8px 0; }
.prijs-tarief .vanaf small { font-size: 0.4em; color: var(--staal); font-family: 'Inter', sans-serif; font-weight: 500; display: block; }
.prijs-tarief h3, .prijs-tarief h4 { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: normal; line-height: inherit; color: var(--zwart); font-size: 1.2rem; margin-bottom: 0.5rem; }
.prijs-tarief li { padding: 6px 0; border-bottom: 1px dashed #DDD; }
.prijs-tarief li:last-child { border-bottom: none; }
.prijs-tarief ul { list-style: none; padding: 0; margin-top: 12px; font-size: 0.95rem; }
.prijs-tarief-foto { height: 118px; margin: -32px -32px 18px; display: flex; align-items: center; justify-content: center; background: #F5F5F4; border-bottom: 1px solid #E7E7E4; overflow: hidden; }
.prijs-tarief-foto img { height: 104px; width: auto; object-fit: contain; display: block; }
.prijs-tarief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; margin-top: 2rem; }
.prijs-tarief.featured { background: var(--zwart); color: var(--wit); }
.prijs-tarief.featured .prijs-tarief-foto { background: var(--zwart); border-bottom-color: #2a2a2a; }
.prijs-tarief.featured .vanaf small { color: #AAA; }
.prijs-tarief.featured h3, .prijs-tarief.featured h4, .prijs-tarief.featured .vanaf { color: var(--wit); }
.prijs-tarief.featured li { border-bottom-color: var(--rand); }
.prijs-tarief.featured p { color: #DDD; }

/* ==========================================================================
   Kaarten en knopvarianten, verplaatst uit de losse <style>-blokken op
   2026-08-18. Deze regels stonden identiek op tientallen paginas, waardoor
   elke visuele wijziging een bewerking per pagina werd.

   chrome.css laadt na die blokken, dus wat hier staat wint. Zet deze klassen
   dus niet opnieuw in een pagina, en gebruik voor een uitzondering een
   specifiekere selector.

   .btn zelf staat hier bewust NIET: die heeft per pagina responsive
   overrides in @media, en die zouden het van deze regels verliezen.
   ========================================================================== */

/* --- toeslag --- */
.toeslag { padding: 24px; border: 2px solid var(--zwart); border-top: 6px solid var(--geel); background: var(--wit); }
.toeslag .bedrag { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--geel); text-shadow: 1px 1px 0 var(--zwart); margin-bottom: 4px; }
.toeslag h3, .toeslag h4 { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: normal; line-height: inherit; font-size: 1.1rem; margin-bottom: 0.5rem; }
.toeslag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 2rem; }

/* ==========================================================================
   Knoppen en CTA-rijen van de paginas die geen flyer.css laden, verplaatst uit
   hun eigen <style>-blokken op 2026-08-18.

   Eigen namen (knop, cta-rij), want .btn en .cta-row horen bij flyer.css op 220
   paginas en blog.css stuurt zijn knop via article.post .cta a.btn. chrome.css
   laadt na allebei, dus de kale namen hier zouden die paginas overschrijven.

   De mobiele variant hoort hier te staan en niet in een pagina: chrome.css
   laadt later en zou een pagina-override anders verslaan.
   ========================================================================== */
.knop { display: inline-block; padding: 16px 28px; font-weight: 700; font-size: 1.05rem; border-radius: 4px; transition: transform 0.1s, box-shadow 0.2s; border: 2px solid transparent; cursor: pointer }
.knop-primair { background: var(--geel); color: var(--zwart) }
.knop-primair:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,197,24,0.3) }
.knop-secundair { background: transparent; color: var(--wit); border-color: var(--wit) }
.knop-secundair:hover { background: var(--wit); color: var(--zwart) }
.cta-rij { display: flex; gap: 16px; flex-wrap: wrap }
.cta-slot .knop-primair { background: var(--zwart); color: var(--geel) }
.cta-slot .knop-secundair { border-color: var(--zwart); color: var(--zwart) }
.cta-slot .knop-secundair:hover { background: var(--zwart); color: var(--geel) }
.cta-slot .cta-rij { justify-content: center }
.cta-rij-mb { margin-bottom: 1rem; }

@media (max-width: 640px) {
    .knop { padding: 14px 22px; font-size: 1rem; width: 100%; text-align: center; }
}

/* ==========================================================================
   GOOGLE REVIEWS
   Het reviewblok stond eerst twee keer inline overgeschreven, op de homepage
   en op contact. Nu staat het hier, want partials/reviews*.html hangt het
   onder tientallen pagina's en die mogen niet ieder hun eigen kopie dragen.

   Het blok leunt met opzet nergens op. section.dark, .container en
   .section-eyebrow staan per pagina in de pagina zelf of in flyer.css, en
   niet elke pagina heeft ze; een blok dat op de ene pagina klopt en op de
   andere kleurloos uitvalt is erger dan geen blok. Vandaar eigen namen en
   eigen maten. chrome.css laadt na de pagina, dus deze regels winnen.
   ========================================================================== */
.rv-section {
    padding: 80px 0;
    background: var(--zwart);
    color: var(--wit);
    border-bottom: 6px solid var(--geel);
}
.rv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.rv-section .rv-eyebrow {
    display: inline-block;
    background: var(--geel);
    color: var(--zwart);
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.rv-section h2 { color: var(--wit); }
.rv-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: #C7C7C7;
}
.rv-g { width: 22px; height: 22px; flex: none; }
.rv-score { color: var(--geel); font-weight: 700; font-size: 1.35rem; }
.rv-stars { color: var(--geel); font-size: 1.1rem; letter-spacing: 0.08em; }
.rv-slider { position: relative; }
/* De rij schuift zelf, met snap-punten zodat hij altijd op een kaart uitkomt.
   Dat werkt met een veeg en met het toetsenbord, ook zonder de pijltjes. */
.rv-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* De pijltjes zijn de aanwijzing; een balk erbij is dubbelop. */
    scrollbar-width: none;
}
.rv-grid::-webkit-scrollbar { display: none; }
.rv-grid:focus-visible { outline: 2px solid var(--geel); outline-offset: 4px; }
.rv {
    display: flex;
    flex-direction: column;
    /* Op smal scherm één kaart met een randje van de volgende, zodat te zien is
       dat er meer staat. */
    flex: 0 0 clamp(260px, 84vw, 380px);
    scroll-snap-align: start;
    padding: 28px;
    background: var(--wit);
    border-left: 4px solid var(--geel);
    color: var(--zwart);
}
@media (min-width: 900px) {
    /* Precies drie naast elkaar, gaten meegerekend. */
    .rv { flex-basis: calc((100% - 48px) / 3); }
}
.rv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--geel);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.78);
    color: var(--geel);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
/* Staat er niets te schuiven, dan verbergt het script ze helemaal. */
.rv-nav[hidden] { display: none; }
.rv-nav:hover { background: var(--geel); color: var(--zwart); }
.rv-nav:focus-visible { outline: 2px solid var(--geel); outline-offset: 3px; }
.rv-nav svg { width: 18px; height: 18px; fill: currentColor; }
.rv-prev { left: -8px; }
.rv-next { right: -8px; }
/* Vanaf hier is er marge naast de container, dus staan de pijlen naast de
   kaarten in plaats van erop. Smaller overlappen ze, en dat mag. */
@media (min-width: 1280px) {
    .rv-prev { left: -56px; }
    .rv-next { right: -56px; }
}
.rv-q {
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 16px;
    flex: 1 0 auto;
}
.rv-by {
    color: var(--staal);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
}
/* De sterren per review staan op een witte kaart, dus niet in het geel van de
   kop: dat is op wit nauwelijks te zien en hier dragen ze betekenis. */
.rv-rate {
    color: #B58100;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 12px;
}
.rv-all {
    display: block;
    text-align: center;
    margin-top: 2rem;
    color: var(--geel);
    font-weight: 600;
    text-decoration: underline;
}
@media (max-width: 640px) {
    .rv-section { padding: 60px 0; }
}

/* LANGE SAMENSTELLINGEN
   Nederlands zit vol woorden als "beroepsaansprakelijkheidsverzekeraar". Dat
   woord is 310px breed en past op een telefoon van 320 in geen enkele kolom,
   dus duwde het in zijn eentje de hele pagina opzij. Afbreken gebeurt alleen
   als het woord er echt niet in past, dus op een breed scherm verandert er
   niets. */
body { overflow-wrap: break-word; }

/* ZEER SMALLE SCHERMEN (320px)
   De balk is merk + taalkeuze + bestelknop + hamburger, en die vier passen
   samen net niet op een toestel van 320 breed zodra de knoptekst wat langer
   is. In het Frans staat er "Commander" in plaats van "Bestel" en dat scheelt
   35px, precies genoeg om de hele pagina zijwaarts te laten schuiven. De
   taalkeuze staat alleen hier en nergens in het uitklapmenu, dus die kan niet
   weg. We halen de ruimte uit de marge, het merk en de knop zelf. */
@media (max-width: 400px) {
    nav .nav-inner { padding-left: 14px; padding-right: 14px; }
    nav .brand { font-size: 1.25rem; }
    nav .nav-actions { gap: 8px; }
    nav .nav-cta { padding: 6px 8px; font-size: 0.72rem; }
}