/* =====================================================================
   Bos & Landschap — website
   Eén stylesheet. Bovenaan staan alle kleuren, letters en maten als
   variabele: pas ze hier aan en de hele site volgt.

   De opbouw gebruikt bekende Bootstrap-namen (container, row, col-md-6,
   navbar, accordion, btn), zodat de HTML vertrouwd aanvoelt.
   ===================================================================== */

/* ------------------------------- Letter ------------------------------ */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------- Tokens ------------------------------ */
:root {
    --forest-900: #16292b;
    --forest-800: #233b36;
    --forest-700: #2d4f47;
    --forest-600: #3d6960;
    --forest-500: #49726a;
    --forest-btn: #315e54;

    --lime-500: #a8e55d;
    --lime-600: #96d84a;
    --lime-100: #eaf8d6;

    --green-700: #4f7a3f;
    --green-600: #6f9a5d;
    --sage-500: #9eb081;
    --sage-300: #ccdfda;
    --sage-200: #dbe9e5;
    --sage-100: #edf5f3;

    --terra-500: #e44c17;
    --terra-100: #fdece5;
    --sun-500: #f4d072;
    --sun-100: #fef3c7;
    --sun-line: #f59e0b;

    --paper: #edf5f3;
    --paper-2: #e2eae8;
    --sand: #f9f8f4;
    --line: #ccdfda;
    --line-soft: #e2eae8;
    --ink: #233b36;
    --ink-2: #525252;
    --ink-3: #737373;
    --white: #fff;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(35, 59, 54, .05);
    --shadow-md: 0 14px 40px rgba(35, 59, 54, .10);
    --shadow-lg: 0 30px 70px rgba(35, 59, 54, .16);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --nav-h: 76px;
}

/* -------------------------------- Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
    margin: 0; background: var(--white); color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--forest-btn); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--forest-800); }
h1, h2, h3, h4, h5 { margin: 0 0 .6em; font-weight: 600; line-height: 1.18; letter-spacing: -.018em; color: var(--forest-800); }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }
::selection { background: var(--lime-500); color: var(--forest-900); }
:focus-visible { outline: 3px solid var(--lime-500); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------- Raster ------------------------------ */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.container-narrow { max-width: 820px; }
.container-wide { max-width: 1360px; }
.row { display: flex; flex-wrap: wrap; margin-inline: -14px; }
.row > * { padding-inline: 14px; width: 100%; }
.g-0 { margin-inline: 0; } .g-0 > * { padding-inline: 0; }
.row.gy-3 > * { margin-bottom: 18px; }
.row.gy-4 > * { margin-bottom: 26px; }
.row.gy-5 > * { margin-bottom: 34px; }
.col { flex: 1 0 0%; }
.col-auto { width: auto; flex: 0 0 auto; }
.col-6 { width: 50%; }
.col-12 { width: 100%; }
@media (min-width: 768px) {
    .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; }
    .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; }
    .col-md-9 { width: 75%; } .col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
    .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; }
    .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; }
    .col-lg-9 { width: 75%; }
}

/* ----------------------------- Hulpklassen --------------------------- */
.d-flex { display: flex; } .d-grid { display: grid; } .d-block { display: block; }
.d-none { display: none; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.gap-1 { gap: 6px; } .gap-2 { gap: 10px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; } .mb-4 { margin-bottom: 26px; } .mb-5 { margin-bottom: 40px; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 26px; } .mt-5 { margin-top: 40px; }
.w-100 { width: 100%; }
.lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--ink-2); line-height: 1.6; }
.small { font-size: .875rem; }
.muted { color: var(--ink-3); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.list-clean { list-style: none; padding: 0; }
/* Opsomming met vinkjes, buiten de abonnementkaarten om. */
.tick-list { list-style: none; padding: 0; margin: 0 0 20px; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: .95rem; }
.tick-list li svg { width: 19px; height: 19px; flex: none; color: var(--green-600); margin-top: 3px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------- Vlakken ---------------------------- */
.section { padding: clamp(56px, 4vw + 34px, 104px) 0; }
.section--tight { padding: clamp(40px, 3vw + 22px, 72px) 0; }
.bg-mint { background: var(--paper); }
.bg-sand { background: var(--sand); }
.bg-forest { background: var(--forest-800); color: rgba(255, 255, 255, .86); }
.bg-forest h1, .bg-forest h2, .bg-forest h3, .bg-forest h4 { color: #fff; }
.bg-forest .lead { color: rgba(255, 255, 255, .8); }
.bg-forest a:not(.btn):not(.pill) { color: var(--lime-500); }
.bg-forest p, .bg-forest li { color: rgba(255, 255, 255, .82); }
.bg-forest .muted, .bg-forest .small { color: rgba(255, 255, 255, .66); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    color: var(--forest-btn); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--lime-500); border-radius: 2px; }
.bg-forest .eyebrow { color: var(--lime-500); }
.bg-forest .eyebrow::before { background: var(--lime-500); }
.section-head { max-width: 720px; margin-bottom: clamp(30px, 3vw, 52px); }
.section-head.text-center { margin-inline: auto; }

/* -------------------------------- Knoppen ---------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border-radius: var(--r-md); border: 1.5px solid transparent;
    font: inherit; font-size: .95rem; font-weight: 550; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--forest-800); color: #fff; }
.btn-primary:hover { background: var(--forest-btn); color: #fff; }
.btn-lime { background: var(--lime-500); color: var(--forest-800); }
.btn-lime:hover { background: var(--lime-600); color: var(--forest-800); }
.btn-outline { background: transparent; color: var(--forest-800); border-color: var(--forest-800); }
.btn-outline:hover { background: var(--forest-800); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { background: #fff; color: var(--forest-800); border-color: #fff; }
.btn-white { background: #fff; color: var(--forest-800); }
.btn-white:hover { background: var(--sage-100); color: var(--forest-800); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn-sm { padding: 9px 16px; font-size: .875rem; }
.btn-block { display: flex; width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; }
.link-arrow svg { width: 17px; height: 17px; transition: transform .18s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ------------------------------- Navigatie --------------------------- */
.navbar {
    position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px); border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.navbar.is-stuck { border-bottom-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.navbar-inner { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.navbar-brand { display: flex; align-items: center; flex: none; }
.navbar-brand img { height: 38px; width: auto; }
.navbar-collapse { display: flex; align-items: center; gap: 18px; margin-left: auto; }
/* Alleen zichtbaar in het uitgeschoven menu op een telefoon. */
.navbar-foot { display: none; }
.navbar-nav { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin: 0; }
.nav-link {
    display: block; padding: 9px 13px; border-radius: var(--r-sm);
    font-size: .93rem; font-weight: 500; color: var(--forest-800);
    transition: background .15s var(--ease);
}
.nav-link:hover { background: var(--sage-100); color: var(--forest-800); }
.nav-link.active { background: var(--lime-500); color: var(--forest-800); border-radius: var(--r-md); }
.navbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.navbar-toggler {
    display: none; width: 44px; height: 44px; border: 1px solid var(--line);
    border-radius: var(--r-sm); background: #fff; cursor: pointer; padding: 0;
    align-items: center; justify-content: center; margin-left: auto;
}
.navbar-toggler span, .navbar-toggler span::before, .navbar-toggler span::after {
    display: block; width: 19px; height: 2px; background: var(--forest-800); border-radius: 2px;
    transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.navbar-toggler span { position: relative; }
.navbar-toggler span::before, .navbar-toggler span::after { content: ''; position: absolute; left: 0; }
.navbar-toggler span::before { top: -6px; } .navbar-toggler span::after { top: 6px; }
.navbar-toggler[aria-expanded="true"] span { background: transparent; }
.navbar-toggler[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991px) {
    .navbar-toggler { display: inline-flex; }
    .navbar-collapse { display: none; }
    .navbar-collapse {
        position: fixed; inset: var(--nav-h) 0 auto; background: #fff;
        border-bottom: 1px solid var(--line-soft); box-shadow: var(--shadow-md);
        padding: 14px 24px 22px; display: none; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    }
    /* Het menu vult het hele scherm, zodat de pagina er niet onderdoor
       schemert en de aandacht bij de keuze blijft. */
    .navbar-collapse.show {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        min-height: calc(100vh - var(--nav-h));
    }
    .navbar-nav { flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; }
    .nav-link { padding: 13px 14px; font-size: 1rem; }
    .navbar-actions { margin-top: 14px; flex-direction: column; align-items: stretch; }
    .navbar-actions .btn { width: 100%; }
    .navbar-foot {
        display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 26px;
        font-size: .88rem; color: var(--ink-3);
    }
    .navbar-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--forest-800); font-weight: 500; }
    .navbar-foot svg { width: 16px; height: 16px; color: var(--green-600); flex: none; }
}

/* --------------------------------- Hero ------------------------------ */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-copy { padding: clamp(48px, 5vw, 90px) 0; max-width: 620px; }
.hero h1 { margin-bottom: 20px; }
.hero-media { position: relative; padding: clamp(48px, 5vw, 90px) 0;}
.hero-media img { border-radius: var(--r-xl); box-shadow: var(--shadow-md); aspect-ratio: 16 / 11; object-fit: cover; width: 100%; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero--dark { background: var(--forest-800); }
.hero--dark h1, .hero--dark p { color: #fff; }
.hero--dark .lead { color: rgba(255, 255, 255, .82); }
.hero-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-blob--1 { width: 420px; height: 420px; right: -140px; top: -160px; background: rgba(158, 176, 129, .22); }
.hero-blob--2 { width: 260px; height: 260px; left: -120px; bottom: -120px; background: rgba(168, 229, 93, .18); }

.pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px;
    border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line);
    font-size: .84rem; font-weight: 500; color: var(--forest-800);
}
.pill svg { width: 16px; height: 16px; color: var(--green-600); }
.bg-forest .pill { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }

/* -------------------------------- Kaarten ---------------------------- */
.card {
    background: #fff; border-radius: var(--r-lg); padding: 28px;
    border: 1px solid var(--line-soft);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* Kaarten naast elkaar krijgen dezelfde hoogte. Staan er meerdere kaarten
   onder elkaar in één kolom, dan houdt elke kaart gewoon zijn eigen hoogte. */
.row > [class*="col-"] > .card:only-child { height: 100%; }
/* Klein tekstvak binnen een kaart (bijvoorbeeld een voorbeeldmeting) */
.note { background: var(--paper); border-radius: var(--r-md); padding: 16px; }
.note > :last-child { margin-bottom: 0; }
.card--flat { border-color: transparent; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line); }
.card--mint { background: var(--paper); border-color: transparent; }
.card--sand { background: var(--sand); border-color: transparent; }
.card--dark { background: var(--forest-800); border-color: transparent; color: rgba(255, 255, 255, .84); }
.card--dark a:not(.btn) { color: var(--lime-500); }
.card--dark h3, .card--dark h4 { color: #fff; }
.card__icon {
    width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center;
    background: var(--lime-100); color: var(--forest-800); margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card__icon--lime { background: var(--lime-500); }
.card__icon--mint { background: var(--sage-200); }
.card__icon--sun { background: var(--sun-100); color: #8a6b1a; }
.card h3, .card h4 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

.media-card { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 100%; }
.media-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s var(--ease); }
.media-card:hover img { transform: scale(1.05); }
.media-card__body {
    position: absolute; inset: auto 0 0; padding: 22px;
    background: linear-gradient(transparent, rgba(22, 41, 43, .88) 55%); color: #fff;
}
.media-card__body h3 { color: #fff; margin-bottom: 4px; font-size: 1.15rem; }
.media-card__body p { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .82); }

/* -------------------------------- Stappen ---------------------------- */
.steps { counter-reset: stap; }
.step {
    display: grid; grid-template-columns: 54px 1fr; gap: 20px;
    padding: 22px 0; border-top: 1px solid var(--line-soft);
}
.step:first-child { border-top: 0; }
.step__num {
    width: 44px; height: 44px; border-radius: var(--r-md); background: var(--forest-800); color: #fff;
    display: grid; place-items: center; font-weight: 600; font-size: 1rem;
}
.step--active .step__num { background: var(--lime-500); color: var(--forest-800); }
.step h4 { margin-bottom: 5px; }
.step p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.bg-forest .step { border-top-color: rgba(255, 255, 255, .14); }
.bg-forest .step p { color: rgba(255, 255, 255, .78); }
.bg-forest .step__num { background: rgba(255, 255, 255, .12); color: #fff; }
.bg-forest .step--active .step__num { background: var(--lime-500); color: var(--forest-800); }

/* -------------------------- Interactieve tabs ------------------------ */
.tabset { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 26px; align-items: start; }
.tablist { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tab-btn {
    display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left;
    padding: 15px 17px; border-radius: var(--r-md); border: 1px solid transparent;
    background: transparent; cursor: pointer; font: inherit; color: var(--forest-800);
    transition: background .16s var(--ease), border-color .16s var(--ease);
}
.tab-btn:hover { background: #fff; }
.tab-btn[aria-selected="true"] { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.tab-btn .tab-btn__ico {
    width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
    background: var(--sage-200); color: var(--forest-800);
    font-size: .95rem; font-weight: 600; line-height: 1;
}
.tab-btn[aria-selected="true"] .tab-btn__ico { background: var(--lime-500); }
.tab-btn__ico svg { width: 20px; height: 20px; }
.tab-btn strong { display: block; font-size: .97rem; font-weight: 600; color: var(--forest-800); }
.tab-btn > span:not(.tab-btn__ico) { display: block; font-size: .85rem; color: var(--ink-3); line-height: 1.45; }
.tabpanel { display: none; }
.tabpanel.show { display: block; animation: fadeUp .4s var(--ease) both; }
@media (max-width: 900px) {
    .tabset { grid-template-columns: minmax(0, 1fr); }
    .tablist {
        flex-direction: row; overflow-x: auto; padding-bottom: 8px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        margin-inline: -4px; padding-inline: 4px;
    }
    .tablist::-webkit-scrollbar { height: 5px; }
    .tablist::-webkit-scrollbar-thumb { background: var(--sage-300); border-radius: 3px; }
    .tab-btn { flex: 0 0 auto; width: 250px; scroll-snap-align: start; background: #fff; border-color: var(--line-soft); }
    .tab-btn strong, .tab-btn span { white-space: normal; }
}

/* --------------------------- Portalvoorbeeld ------------------------- */
.mock {
    background: #fff; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--shadow-md); border: 1px solid var(--line-soft);
}
.mock__bar {
    background: var(--forest-800); padding: 13px 18px; display: flex; align-items: center; gap: 10px;
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.mock__title { color: #fff; font-size: .8rem; margin-left: 8px; font-weight: 500; }
.mock__nav { background: var(--paper-2); padding: 9px 14px; display: flex; gap: 4px; overflow: hidden; }
.mock__nav span {
    padding: 6px 12px; border-radius: var(--r-sm); font-size: .78rem; color: var(--forest-800); white-space: nowrap;
}
.mock__nav span.on { background: var(--lime-500); border-radius: var(--r-md); font-weight: 550; }
.mock__body { padding: 20px; background: var(--paper); min-height: 330px; }
.mock-card { background: #fff; border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; }
.mock-card:last-child { margin-bottom: 0; }
.mock-card h5 { margin: 0 0 3px; font-size: .92rem; font-weight: 600; color: var(--forest-800); }
.mock-card p { margin: 0; font-size: .82rem; color: var(--ink-3); }
.mock-row { display: flex; align-items: center; gap: 12px; }
.mock-meter { height: 9px; border-radius: var(--r-pill); background: var(--sage-100); overflow: hidden; }
.mock-meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--green-600); }
.mock-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 550; background: var(--sage-100); color: var(--forest-800);
}
.mock-chip--sun { background: var(--sun-100); color: #8a6b1a; }
.mock-chip--terra { background: var(--terra-100); color: #b8482c; }
.mock-signal {
    display: flex; gap: 13px; padding: 13px; border-radius: var(--r-sm); align-items: flex-start;
    background: linear-gradient(180deg, #fffbeb, #fff 70%); border: 1px solid var(--sun-line); margin-bottom: 10px;
}
.mock-signal--info { background: linear-gradient(180deg, #eef2ff, #fff 70%); border-color: #6366f1; }
.mock-signal__ico { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--sun-100); color: var(--sun-line); }
.mock-signal--info .mock-signal__ico { background: #e0e7ff; color: #6366f1; }
.mock-signal__ico svg { width: 18px; height: 18px; }
.mock-map { border-radius: var(--r-md); overflow: hidden; position: relative; }
.mock-map img { aspect-ratio: 16 / 10; object-fit: cover; }
.mock-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.mock-timeline { position: relative; padding-left: 22px; }
.mock-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--sage-300); }
.mock-timeline li { position: relative; list-style: none; margin-bottom: 13px; font-size: .84rem; }
.mock-timeline li::before {
    content: ''; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px;
    border-radius: 50%; background: #fff; border: 2px solid var(--green-600);
}
.mock-timeline strong { display: block; color: var(--forest-800); font-weight: 600; }
.mock-timeline span { color: var(--ink-3); font-size: .78rem; }

/* --------------------------- Health score ---------------------------- */
.gauge { position: relative; width: var(--gauge, 170px); height: var(--gauge, 170px); display: grid; place-items: center; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--forest-500); stroke-width: 13; }
.gauge__val {
    fill: none; stroke: var(--lime-500); stroke-width: 13; stroke-linecap: round;
    stroke-dasharray: 0 999; transition: stroke-dasharray 1.4s var(--ease);
}
.gauge__label { position: absolute; text-align: center; line-height: 1.05; }
.gauge__num { font-size: calc(var(--gauge, 170px) * .28); font-weight: 600; color: #fff; }
.gauge__sub { font-size: .78rem; color: rgba(255, 255, 255, .7); }
.gauge--light .gauge__track { stroke: var(--sage-200); }
.gauge--light .gauge__num { color: var(--forest-800); }
.gauge--light .gauge__sub { color: var(--ink-3); }

/* ------------------------------ Voor / na ---------------------------- */
.compare { position: relative; border-radius: var(--r-lg); overflow: hidden; user-select: none; touch-action: pan-y; }
.compare img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.compare__after { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.compare__after img { width: var(--cw, 900px); max-width: none; height: 100%; }
.compare__handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff;
    cursor: ew-resize; box-shadow: 0 0 0 1px rgba(35, 59, 54, .16);
}
.compare__grip {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center;
    box-shadow: var(--shadow-md); color: var(--forest-800);
}
.compare__grip svg { width: 22px; height: 22px; }
.compare__tag {
    position: absolute; top: 14px; padding: 5px 13px; border-radius: var(--r-pill);
    background: rgba(22, 41, 43, .74); color: #fff; font-size: .76rem; font-weight: 550;
}
.compare__tag--l { left: 14px; } .compare__tag--r { right: 14px; }

/* ------------------------------- Cijfers ----------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.stat { text-align: left; }
.stat__num { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); font-weight: 600; color: var(--forest-800); line-height: 1; }
.bg-forest .stat__num { color: var(--lime-500); }
.stat__lbl { font-size: .88rem; color: var(--ink-3); margin-top: 7px; }
.bg-forest .stat__lbl { color: rgba(255, 255, 255, .72); }

/* ----------------------------- Abonnementen -------------------------- */
.plan {
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
    padding: 30px; height: 100%; display: flex; flex-direction: column; position: relative;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured { border-color: var(--forest-800); border-width: 2px; box-shadow: var(--shadow-md); }
.plan__tag {
    position: absolute; top: -13px; left: 30px; padding: 5px 14px; border-radius: var(--r-pill);
    background: var(--lime-500); color: var(--forest-800); font-size: .76rem; font-weight: 600;
}
.plan__name { font-size: 1.35rem; margin-bottom: 4px; }
.plan__for { color: var(--ink-3); font-size: .92rem; margin-bottom: 20px; }
.plan__price { font-size: 1.02rem; color: var(--forest-800); font-weight: 550; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.plan__price small { display: block; font-weight: 400; color: var(--ink-3); font-size: .84rem; margin-top: 3px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; font-size: .93rem; }
.plan li svg { width: 19px; height: 19px; flex: none; color: var(--green-600); margin-top: 2px; }

.compare-table { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.compare-table thead th { background: var(--forest-800); color: #fff; font-weight: 600; font-size: .88rem; }
.compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; width: 22%; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover { background: var(--sage-100); }
.compare-table .yes { color: var(--green-600); font-weight: 600; }
.compare-table .no { color: var(--ink-3); }
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
/* Op een telefoon moet de hele tabel in beeld passen; anders valt de kolom
   Premium buiten het scherm en lijkt de vergelijking onvolledig. */
@media (max-width: 640px) {
    .compare-table { font-size: .8rem; }
    .compare-table th, .compare-table td { padding: 10px 8px; }
    .compare-table thead th { font-size: .78rem; }
    .compare-table td:first-child, .compare-table th:first-child { padding-left: 12px; }
    .compare-table td:not(:first-child), .compare-table th:not(:first-child) { width: 24%; }
}

/* -------------------------------- Accordeon -------------------------- */
.accordion-item { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; }
.accordion-button {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    padding: 18px 22px; background: none; border: 0; cursor: pointer; font: inherit;
    font-size: 1.02rem; font-weight: 550; color: var(--forest-800); text-align: left;
}
.accordion-button:hover { background: var(--sage-100); }
.accordion-button svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); color: var(--forest-btn); }
.accordion-button[aria-expanded="true"] svg { transform: rotate(45deg); }
.accordion-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.accordion-collapse.show { grid-template-rows: 1fr; }
.accordion-body { overflow: hidden; }
.accordion-body > div { padding: 0 22px 20px; color: var(--ink-2); }
.accordion-body p:last-child { margin-bottom: 0; }

/* -------------------------------- Formulier -------------------------- */
.form-label { display: block; font-size: .89rem; font-weight: 550; margin-bottom: 6px; color: var(--forest-800); }
.form-control {
    width: 100%; padding: 12px 15px; font: inherit; font-size: .96rem; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus { outline: 0; border-color: var(--forest-btn); box-shadow: 0 0 0 4px rgba(49, 94, 84, .12); }
.form-control::placeholder { color: #a3b3af; }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-group { margin-bottom: 18px; }
.form-hint { font-size: .82rem; color: var(--ink-3); margin-top: 6px; }
.form-error { font-size: .84rem; color: #b8482c; margin-top: 6px; display: none; font-weight: 500; }
.form-control.is-invalid { border-color: var(--terra-500); }
.form-control.is-invalid + .form-error { display: block; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .choice { grid-template-columns: minmax(0, 1fr); } }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice label {
    display: block; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: #fff; cursor: pointer; height: 100%;
    transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.choice label:hover { border-color: var(--sage-500); transform: translateY(-2px); }
.choice input:checked + label { border-color: var(--forest-800); border-width: 2px; background: var(--sage-100); padding: 19px; }
.choice input:focus-visible + label { outline: 3px solid var(--lime-500); outline-offset: 2px; }
.choice__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.choice__name { font-weight: 600; color: var(--forest-800); }
.choice__mark {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); flex: none;
    display: grid; place-items: center; background: #fff;
}
.choice input:checked + label .choice__mark { background: var(--forest-800); border-color: var(--forest-800); }
.choice__mark svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.choice input:checked + label .choice__mark svg { opacity: 1; }
.choice p { margin: 0; font-size: .87rem; color: var(--ink-2); line-height: 1.5; }

.form-status { padding: 16px 18px; border-radius: var(--r-md); margin-bottom: 18px; display: none; font-size: .94rem; }
.form-status.show { display: block; }
.form-status--ok { background: var(--lime-100); border: 1px solid var(--green-600); color: var(--forest-800); }
.form-status--err { background: var(--terra-100); border: 1px solid var(--terra-500); color: #8f3411; }

/* --------------------------------- Voet ------------------------------ */
.site-footer { background: var(--forest-800); color: rgba(255, 255, 255, .74); padding: 60px 0 28px; font-size: .92rem; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.site-footer a:not(.btn):not(.pill) { color: rgba(255, 255, 255, .74); }
.site-footer a:not(.btn):not(.pill):hover { color: var(--lime-500); }
.site-footer .pill { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.site-footer .pill:hover { background: rgba(255, 255, 255, .16); }
.site-footer .pill svg { color: var(--lime-500); }
.site-footer img { height: 40px; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-bottom {
    margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .85rem;
    color: rgba(255, 255, 255, .55);
}

/* -------------------------------- CTA-blok --------------------------- */
.cta-band { background: var(--forest-800); border-radius: var(--r-xl); padding: clamp(34px, 4vw, 60px); position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .8); }
.cta-band a:not(.btn) { color: var(--lime-500); }
.cta-band .btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------- Foto's ---------------------------- */
/*
 * Een foto achter een donkere sectie.
 *
 * De foto wordt eerst zelf gedempt (brightness .45): daarmee ligt de
 * helderste plek in de foto vast op ongeveer 140 van de 255, hoe fel de
 * lucht op die foto ook is. Daarbovenop komt een groen waas. Witte tekst
 * houdt daardoor overal minimaal 5,5:1 contrast — ook boven een wolkenlucht
 * of een fel stuk gazon. De foto is sfeer, geen decor waar de tekst
 * tegenaan moet vechten.
 *
 * De selectors zijn bewust twee klassen diep: huisstijl.css zet met
 * `.section > *` alles binnen een sectie op position:relative, en dat
 * zou een enkelvoudige klasse hier overrulen.
 */
.section--foto, .cta-band--foto { position: relative; overflow: hidden; }
.section--foto > .sectiefoto,
.cta-band--foto > .sectiefoto {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.sectiefoto img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(.55) saturate(1.08);
}
.sectiefoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(102deg,
        rgba(22, 41, 43, .72) 0%,
        rgba(22, 41, 43, .52) 46%,
        rgba(22, 41, 43, .34) 100%);
}
/* De inhoud komt boven de foto te liggen. */
.section--foto > .container,
.cta-band--foto > .row { position: relative; z-index: 1; }
/* Waar een foto staat hoeft het bladwatermerk niet meer. */
.section--foto::after, .cta-band--foto::after { display: none; }

/*
 * Drie foto's op een rij, onderaan een sectie. Puur beeld, geen tekst — dus
 * er valt ook niets weg te vallen. Op een telefoon wordt het een mozaïek:
 * de eerste over de volle breedte, de andere twee eronder naast elkaar.
 */
.fotostrip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1vw, 16px);
    margin-top: clamp(30px, 3.4vw, 54px);
}
.fotostrip img {
    width: 100%; height: clamp(180px, 19vw, 280px);
    object-fit: cover; border-radius: var(--r-lg); display: block;
}
@media (max-width: 820px) {
    .fotostrip { grid-template-columns: 1fr 1fr; }
    .fotostrip img { height: clamp(130px, 32vw, 190px); }
    .fotostrip img:first-child { grid-column: 1 / -1; height: clamp(170px, 44vw, 230px); }
}

/* Een foto naast of onder een tekstblok. */
.fotoblok { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.fotoblok img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }

/* ------------------------------- Animatie ---------------------------- */
/* Zonder JavaScript blijft alles gewoon zichtbaar. */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    html.js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------ Responsief --------------------------- */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { padding-top: 40px; padding-bottom: 8px; }
    .hero-media { padding-bottom: 44px; }
    .col-6 { width: 100%; }
}
@media (max-width: 560px) {
    .container { padding-inline: 18px; }
    .card { padding: 22px; }
    .plan { padding: 24px; }
    .btn { width: 100%; }
    .btn-inline { width: auto; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
   Dialoog onder de hero
   ------------------------------------------------------------------
   Een bezwaar dat we vaak horen, en het antwoord erop — als gesprek,
   omdat je dat leest zoals je het hoort.

   Twee kolommen op een breed scherm: de vraag links, het gesprek
   rechts. Zo blijft de balk laag en staat er niets naast leeg.

   Het venster houdt een vaste hoogte. Berichten die nog niet aan de
   beurt zijn staan op display:none en nemen dus geen ruimte in; het
   spoor schuift omhoog zodat het laatste bericht onderin staat.

   Zonder JavaScript staat het hele gesprek er gewoon onder elkaar; de
   klasse .is-animeert wordt pas door site.js gezet.
   ================================================================== */
.dialoog { overflow: hidden; }
.dialoog__grid { display: grid; gap: clamp(20px, 3vw, 44px); align-items: start; }
.dialoog__kop { max-width: 560px; }
.dialoog__titel {
    font-size: clamp(1.2rem, 1.3vw + .95rem, 1.6rem); margin: 0;
    color: #fff; letter-spacing: -.02em;
}
.dialoog__intro {
    margin: 10px 0 0; font-size: .9rem; line-height: 1.55;
    color: rgba(255, 255, 255, .68); max-width: 40ch;
}

.dialoog__venster { position: relative; }
.dialoog__spoor { display: flex; flex-direction: column; gap: 12px; }

/* Tijdens het afspelen een vast venster met een zachte vervaging bovenaan,
   zodat berichten er niet hard uit knippen. */
.dialoog__venster.is-animeert {
    height: clamp(280px, 26vw, 330px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 100%);
}
.dialoog__venster.is-animeert .dialoog__spoor {
    position: absolute; left: 0; right: 0; top: 0;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
/* Wat nog niet gezegd is, neemt ook geen plaats in. */
.dialoog__venster.is-animeert .dbericht { display: none; }
.dialoog__venster.is-animeert .dbericht.is-in {
    display: flex;
    animation: dbelIn .42s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes dbelIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------- Bericht --------------------------- */
.dbericht { display: flex; gap: 10px; align-items: flex-start; max-width: 94%; }
.dbericht--bl { align-self: flex-end; flex-direction: row-reverse; }

.dbericht__wie {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .16);
}
.dbericht__wie--bl { background: var(--lime-500); border-color: var(--lime-500); }
.dbericht__wie img { width: 18px; height: 18px; display: block; }

.dbericht__bel {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 15px 15px 15px 5px; padding: 11px 15px;
    color: rgba(255, 255, 255, .88); font-size: .92rem; line-height: 1.5;
}
.dbericht--bl .dbericht__bel {
    background: rgba(168, 229, 93, .13); border-color: rgba(168, 229, 93, .26);
    border-radius: 15px 15px 5px 15px; color: #fff;
}
.dbericht__bel p { margin: 0; color: inherit; }
.dbericht__punten { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dbericht__punten li {
    position: relative; padding-left: 16px;
    font-size: .85rem; color: rgba(255, 255, 255, .8); line-height: 1.45;
}
.dbericht__punten li::before {
    content: ''; position: absolute; left: 0; top: .52em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--lime-500);
}
/* De laatste regel is de conclusie en mag dat laten zien. */
.dbericht--slot .dbericht__bel {
    background: var(--lime-500); border-color: var(--lime-500); color: var(--forest-900);
    font-weight: 600; font-size: .96rem;
}

/* ------------------------------ Typt … ----------------------------- */
.dbericht--typt .dbericht__wie { background: transparent; border-color: transparent; }
.dbericht--typt .dbericht__bel { display: inline-flex; gap: 5px; padding: 12px 14px; }
.dbericht--typt i {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55);
    animation: dtyp 1.1s infinite ease-in-out;
}
.dbericht--typt i:nth-child(2) { animation-delay: .16s; }
.dbericht--typt i:nth-child(3) { animation-delay: .32s; }
@keyframes dtyp {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
/* De indicator hoort bij de kant die aan het woord komt. */
.dialoog__venster.is-animeert .dbericht--typt:not([hidden]) { display: flex; animation: none; }

/* -------------------------------- Voet ----------------------------- */
.dialoog__voet {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}
.dialoog__opnieuw {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .82);
    border-radius: 999px; padding: 7px 15px; font: inherit; font-size: .84rem; cursor: pointer;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.dialoog__opnieuw:hover { border-color: var(--lime-500); color: #fff; }
.dialoog__link { font-size: .88rem; font-weight: 600; }

@media (min-width: 900px) {
    .dialoog__grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        grid-template-areas: "kop venster" "voet venster";
        grid-template-rows: auto 1fr;
        column-gap: clamp(32px, 4vw, 64px);
    }
    .dialoog__kop     { grid-area: kop; }
    .dialoog__venster { grid-area: venster; }
    .dialoog__voet    { grid-area: voet; align-self: end; padding-bottom: 4px; }
}
@media (max-width: 899px) {
    .dialoog__voet { margin-top: 4px; }
}
@media (max-width: 720px) {
    .dialoog__venster.is-animeert { height: clamp(320px, 74vw, 380px); }
    .dbericht { max-width: 100%; }
    .dbericht__bel { font-size: .88rem; padding: 10px 13px; }
    .dbericht__punten li { font-size: .82rem; }
}

/* Wie liever geen beweging ziet, krijgt het gesprek gewoon in zijn geheel. */
@media (prefers-reduced-motion: reduce) {
    .dialoog__venster.is-animeert {
        height: auto; overflow: visible;
        -webkit-mask-image: none; mask-image: none;
    }
    .dialoog__venster.is-animeert .dialoog__spoor { position: static; transition: none; }
    .dialoog__venster.is-animeert .dbericht { display: flex; animation: none; }
    .dbericht--typt, .dialoog__opnieuw { display: none !important; }
}

/* =====================================================================
   Prijscalculator en prijstabel
   =====================================================================
   De calculator is één kaart met twee helften: links wat je invult,
   rechts wat eruit komt. De m²-prijs staat groot, de maandprijs klein —
   in die volgorde, want de m²-prijs is waarmee je tuinen vergelijkt.
   ===================================================================== */
.calc {
    display: grid; gap: 0; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm);
}
.calc__invoer { padding: clamp(22px, 2.4vw, 34px); }
.calc__invoer > :last-child { margin-bottom: 0; }

.calc__veld { position: relative; display: flex; align-items: center; }
.calc__veld .form-control {
    padding-right: 54px; font-size: 1.35rem; font-weight: 600;
    color: var(--forest-800); font-variant-numeric: tabular-nums;
}
.calc__eenheid {
    position: absolute; right: 16px; font-size: 1rem; color: var(--ink-3);
    pointer-events: none; font-weight: 500;
}
/* De pijltjes van het getalveld weg: er staat al een schuif naast, en ze
   kwamen bovenop de eenheid "m²" te staan. */
.calc__veld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc__veld input[type="number"]::-webkit-outer-spin-button,
.calc__veld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Schuif in de huisstijl. Beide voorvoegsels, want Chrome en Firefox
   tekenen de baan en de knop elk op hun eigen manier. */
.calc__schuif {
    -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
    margin: 14px 0 4px; background: transparent; cursor: pointer;
}
.calc__schuif::-webkit-slider-runnable-track {
    height: 6px; border-radius: var(--r-pill); background: var(--sage-200);
}
.calc__schuif::-moz-range-track {
    height: 6px; border-radius: var(--r-pill); background: var(--sage-200);
}
.calc__schuif::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px;
    border-radius: 50%; background: var(--forest-800); border: 4px solid var(--lime-500);
    box-shadow: var(--shadow-sm);
}
.calc__schuif::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%; background: var(--forest-800);
    border: 4px solid var(--lime-500); box-shadow: var(--shadow-sm);
}
.calc__schuif:focus-visible { outline: 3px solid var(--lime-500); outline-offset: 4px; border-radius: var(--r-pill); }
.calc__grenzen {
    display: flex; justify-content: space-between; font-size: .78rem;
    color: var(--ink-3); margin: 0 0 16px;
}

.calc__uitkomst {
    background: var(--forest-800); color: rgba(255, 255, 255, .82);
    padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; justify-content: center;
}
.calc__label {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--lime-500); font-weight: 600;
}
.calc__groot {
    margin: 10px 0 0; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.1rem);
    font-weight: 600; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.calc__groot small {
    display: block; font-size: .9rem; font-weight: 400; letter-spacing: 0;
    color: rgba(255, 255, 255, .7); margin-top: 8px;
}
.calc__regel {
    margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .98rem; color: rgba(255, 255, 255, .82);
}
.calc__regel strong { color: #fff; font-size: 1.15rem; font-weight: 600; }
.calc__melding {
    margin: 14px 0 0; font-size: .85rem; line-height: 1.55;
    color: var(--lime-500); background: rgba(168, 229, 93, .12);
    border-radius: var(--r-md); padding: 11px 13px;
}
.calc__voet {
    margin: 16px 0 0; font-size: .82rem; line-height: 1.55; color: rgba(255, 255, 255, .62);
}

/* De prijstabel. Vier kolommen, alles rechts uitgelijnd behalve de
   oppervlakte — cijfers onder cijfers lezen nu eenmaal beter. */
.prijstabel { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; }
.prijstabel th, .prijstabel td {
    padding: 11px 18px; border-bottom: 1px solid var(--line-soft);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prijstabel thead th { background: var(--forest-800); color: #fff; font-weight: 600; font-size: .84rem; }
.prijstabel td:first-child, .prijstabel th:first-child { text-align: left; }
/* Alleen in de tabelinhoud donkergroen: in de kop is de achtergrond al
   donkergroen, en dan zou de tekst onzichtbaar worden. */
.prijstabel tbody td:first-child { font-weight: 550; color: var(--forest-800); }
.prijstabel tbody tr:hover { background: var(--sage-100); }
.prijstabel tbody tr:last-child td { border-bottom: 0; }
.prijstabel .is-anker { background: var(--lime-100); }
.prijstabel .is-anker td { font-weight: 600; }
.prijstabel .is-slot td { color: var(--ink-3); font-style: italic; }
.prijstabel td[data-maand] { font-weight: 600; color: var(--forest-800); }

/* Twee lijsten naast elkaar: wat er in zit en wat niet. */
.inuit { display: grid; gap: 20px; }
.inuit__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.inuit__ico { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; }
.inuit__ico svg { width: 18px; height: 18px; }
.inuit__ico--ja { background: var(--lime-500); color: var(--forest-800); }
.inuit__ico--nee { background: var(--terra-100); color: #b8482c; }
.inuit ul { list-style: none; padding: 0; margin: 0; }
.inuit li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .93rem; padding: 8px 0; border-top: 1px solid var(--line-soft);
}
.inuit li:first-child { border-top: 0; }
.inuit li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.inuit--ja li svg { color: var(--green-600); }
.inuit--nee li svg { color: var(--terra-500); }

@media (min-width: 800px) {
    .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .inuit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

/* ================== Algemene voorwaarden (/voorwaarden) ==============
   Eén lange juridische tekst. Alles hieronder dient hetzelfde doel:
   een leesbare regelbreedte, nummers die in een eigen kolom staan zodat
   de zinnen links uitlijnen, en een inhoudsopgave om te springen. */

.av-hoofd .av-meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* -- Inhoudsopgave -- */
.av-inhoud {
    background: var(--sand); border: 1px solid var(--line-soft);
    border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px);
    margin-bottom: clamp(34px, 3.4vw, 52px);
}
.av-inhoud__kop {
    font-size: .78rem; font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: var(--forest-btn); margin-bottom: 12px;
}
/* Het nummer komt van de lijst zelf, niet uit de tekst. Zo staat het er
   nooit twee keer en klopt het ook wanneer het stijlblad niet meelaadt. */
.av-inhoud ol {
    list-style: decimal; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px;
}
.av-inhoud li { margin-left: 2em; padding: 5px 0; }
.av-inhoud li::marker {
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--forest-btn);
}
.av-inhoud a { font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
.av-inhoud a:hover { color: var(--forest-800); }

/* -- De artikelen -- */
.av-art { margin-bottom: 34px; }
.av-art + .av-art { border-top: 1px solid var(--line-soft); padding-top: 32px; }
.av-art h2 {
    font-size: clamp(1.14rem, .5vw + 1rem, 1.3rem);
    display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px;
}
.av-art__nr {
    flex: none; min-width: 44px; padding: 2px 0; text-align: center;
    background: var(--lime-100); color: var(--forest-700);
    border-radius: var(--r-sm); font-size: .86rem; font-variant-numeric: tabular-nums;
}
.av-lid { display: flex; gap: 14px; margin: 0 0 11px; }
.av-lid__nr {
    flex: none; width: 44px; padding-top: .08em;
    font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--forest-btn);
}
.av-lijst { margin: -3px 0 15px 58px; padding-left: 18px; color: var(--ink-2); }
.av-lijst li { margin-bottom: 3px; }

.av-slot { margin-top: clamp(30px, 3vw, 46px); display: flow-root; }
.av-slot .btn { margin: 0 8px 0 0; }
.av-versie { margin-top: 18px; }

@media (max-width: 720px) {
    .av-inhoud ol { grid-template-columns: 1fr; }
    .av-art h2 { gap: 10px; }
    .av-art__nr { min-width: 36px; }
    .av-lid { gap: 10px; }
    .av-lid__nr { width: 36px; }
    .av-lijst { margin-left: 46px; padding-left: 16px; }
}

/* -- Afdrukken: de bezoeker mag dit gewoon als document bewaren -- */
@media print {
    .navbar, .site-footer, .av-inhoud, .av-slot, .hero-blob { display: none !important; }
    body { font-size: 10.5pt; }
    .section, .section--tight { padding: 0 0 12pt; }
    .bg-mint, .bg-sand { background: none !important; }
    .container, .container-narrow { max-width: none; padding-inline: 0; }
    .av-art { break-inside: auto; margin-bottom: 14pt; }
    .av-art h2 { break-after: avoid; }
    .av-lid, .av-lijst li { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}