/* ============================================================
   growrs.nl - stylesheet
   Een-op-een de sectiegrammatica van het Growrs klantwebsite-
   systeem (apps/web: mib-growrs / vanberkel-growrs):
   - homepage = banden in vaste volgorde en vaste achtergronden
   - subpagina's = doorlopend artikel met kruimelpad en grids
   - koppen links, dunne borders op inkt, radius 8px
   Kleuren: Growrs-geel #FFE00B en inkt/antraciet.
   ============================================================ */

/* ===== Fonts (zelf gehost, latin subset) ===== */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lato-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lato-700-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/lato-900-latin.woff2') format('woff2');
}
@font-face {
    /* Koppenfont uit het brandbook (licentie gedekt, besluit 4-8-2026).
       Weight-range 100-900: de ene ExtraBold-face bedient alle kopgewichten
       zodat bestaande font-weight: 700/900-regels geen synthetische bold geven. */
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/gilroy-800-latin.woff2') format('woff2');
}

/* ===== Reset & tokens ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Het hidden-attribuut wint altijd, ook van componenten met een eigen display
   (tabpanelen krijgen bijv. display: grid; zonder deze regel blijven ze zichtbaar). */
[hidden] {
    display: none !important;
}

:root {
    /* Brandbook-geel, sitewide (besluit 4-8-2026, zie docs/plannen/redesign-verwerking.md).
       Uitzondering: .subfooter en .personal-contact blijven op #FFDF00 (fotokleur). */
    --geel: #FFDF05;
    --geel-soft: rgba(255, 223, 5, 0.14);
    --geel-strong: #8a7500;            /* geel-familie, AA-leesbaar op wit */
    --ink: #1f1f1f;
    --ink-80: #3d3d3d;
    --ink-70: #4d4d4d;
    --ink-50: #767676;
    --ink-15: rgba(31, 31, 31, 0.15);
    --ink-10: rgba(31, 31, 31, 0.10);
    --ink-5: rgba(31, 31, 31, 0.05);
    --surface: #ffffff;
    --muted: #f6f6f6;
    --donker: #1f1f1f;
    --green: #217a4b;
    --red: #c0392b;
    --radius: 8px;
    --schaduw-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --schaduw-md: 0 4px 14px rgba(0, 0, 0, 0.08);
    --transition: 0.2s ease;

    /* Aliassen voor bestaande markup en scripts */
    --accent: var(--geel);
    --accent-hover: #f0d200;
    --accent-soft: var(--geel-soft);
    --accent-dark: var(--geel-strong);
    --anthracite: var(--ink);
    --anthracite-2: #2b2b2b;
    --white: #ffffff;
    --bg: var(--muted);
    --bg-white: var(--surface);
    --bg-card: var(--surface);
    --text: var(--ink);
    --text-light: var(--ink-70);
    --text-muted: var(--ink-50);
    --border: var(--ink-15);
    --border-light: var(--ink-10);

    /* Redesign-tokens (handoff 2a/2b/2c), additief naast de bestaande */
    --font-kop: 'Gilroy', 'Lato', ui-sans-serif, system-ui, sans-serif;
    --band-kaart: #2A2A2A;          /* kaarten binnen donkere secties */
    --band-rand: #343434;           /* dividers op donker */
    --band-rand-2: #3A3A3A;         /* randen inactieve elementen op donker */
    --band-diep: #161616;           /* slanke footerbalk */
    --tekst-op-donker: #B9BFC7;
    --muted-op-donker: #7A8087;
    --grijs-koel: #EDF0F5;          /* lichte sectie-achtergronden redesign */
    --rand-koel: #E2E6EE;           /* kaartranden op wit */
    --rand-koel-2: #C9D0DA;         /* secundaire knoprand, placeholders */
    --radius-kaart: 16px;
    --radius-blok: 20px;
    --radius-pill: 99px;
}

html {
    scroll-behavior: smooth;
    /* Geen scroll-padding-top hier: die telt op bij de scroll-margin-top van
       [id] verderop (samen 182px), waardoor elke ankersprong veel te diep
       landde en de onderkant van het blok buiten beeld viel. */
}

body {
    font-family: 'Lato', ui-sans-serif, system-ui, sans-serif;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, h4 {
    color: var(--ink);
    font-family: var(--font-kop);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

a {
    text-decoration: none;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--surface);
    border-radius: 4px;
}

::placeholder {
    color: var(--ink-50);
    opacity: 1;
}

/* ===== Knoppen ===== */
.btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 26px;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: opacity var(--transition), border-color var(--transition), color var(--transition);
    text-align: center;
    line-height: 1.3;
}

.btn-accent {
    background: var(--geel);
    color: var(--ink);
}

.btn-accent:hover {
    opacity: 0.88;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--ink-15);
    color: var(--ink);
    padding: 12px 24px;
}

.btn-outline:hover {
    border-color: var(--geel-strong);
    color: var(--geel-strong);
}

.btn-wit {
    background: var(--surface);
    color: var(--ink);
}

.btn-wit:hover {
    opacity: 0.9;
}

.btn-lg {
    padding: 16px 34px;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 10px 18px;
    font-size: 0.9rem;
}

.btn-sub {
    font-size: 0.76rem;
    font-weight: 400;
    opacity: 0.65;
}

.btn-stil {
    background: var(--surface);
    border: 1px solid var(--ink-15);
    color: var(--ink-70);
}

.btn-stil:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* ===== Skip-link ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--geel);
    color: var(--ink);
    padding: 12px 20px;
    font-weight: 700;
    z-index: 2000;
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
    left: 0;
}

/* ===== Site header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgba(31, 31, 31, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 76px;
}

.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    height: 34px;
    width: auto;
}

.site-nav {
    /* Gecentreerd tussen logo (links) en CTA (rechts) */
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
    margin-right: auto;
}

.site-nav a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    font-weight: 700;
    transition: color var(--transition);
}

.site-nav a:hover {
    color: #fff;
}

.site-nav .site-nav-cta {
    display: none;
    color: var(--ink);
}

.site-header-tel {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.site-header-tel:hover {
    color: var(--geel);
}

.site-header-cta {
    flex-shrink: 0;
    flex-direction: row;
    padding: 11px 18px;
    font-size: 0.9rem;
}

.site-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius);
}

@media (min-width: 1024px) {
    .site-header-tel {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ink);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 24px 20px;
        box-shadow: var(--schaduw-md);
    }

    .site-nav.open {
        display: flex;
    }

    .site-nav a {
        padding: 14px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 1rem;
        color: #fff;
    }

    .site-nav .site-nav-cta {
        display: inline-flex;
        margin-top: 16px;
        border-bottom: none;
        padding: 14px 22px;
    }

    .site-header-cta {
        display: none;
    }

    .site-nav-toggle {
        display: flex;
        margin-left: auto;
    }

    .site-header-inner {
        height: 64px;
    }
}

/* ============================================================
   HOMEPAGE-BANDEN (vaste volgorde, vaste achtergronden)
   ============================================================ */

/* ===== 1. Hero (grijs) ===== */
.hero {
    background: var(--muted);
    padding: 72px 0 88px;
}

.hero--sub {
    padding: 52px 0 60px;
}

.hero-content {
    max-width: 780px;
}

.hero-badge {
    display: inline-block;
    padding: 7px 16px;
    background: var(--geel-soft);
    border: 1px solid rgba(138, 117, 0, 0.2);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 100px;
    margin-bottom: 22px;
}

.hero h1 {
    font-size: clamp(2rem, 4.6vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin-bottom: 18px;
}

.hero--sub h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
}

.hero-sub {
    font-size: 1.15rem;
    color: var(--ink-80);
    max-width: 640px;
    margin: 0 0 30px;
    line-height: 1.7;
}

.hero-cta-rij {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-microcopy {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--ink-50);
}

.hero--foto .hero-microcopy {
    color: rgba(255, 255, 255, 0.72);
}

.hero-cta-alt {
    color: var(--ink-70);
    font-size: 0.92rem;
}

.hero-cta-alt a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-cta-alt a:hover {
    color: var(--geel-strong);
}

/* Hero met foto over de volle hero (afbeelding is links vaag voor de tekst) */
.hero--foto {
    /* Verankerd op right top: het hoofd staat bovenaan de foto en mag nooit
       weggecropt worden. De min-height in vw houdt het zichtbare deel van de
       foto op elke schermbreedte gelijk (geen ingezoomd effect op breed). */
    background: var(--ink) url('/images/hero-antraciet-1920.webp') right top / cover no-repeat;
    padding: 64px 0 72px;
    display: flex;
    align-items: center;
    min-height: min(42vw, 88vh);
}

.hero--foto .container {
    width: 100%;
}

.hero--foto .hero-content {
    max-width: 580px;
}

.hero--foto h1 {
    color: #fff;
}

.hero--foto .hero-sub {
    color: rgba(255, 255, 255, 0.85);
}

/* Label, geen knop: wit, kapitalen, strakke hoeken (onderscheid met de CTA eronder) */
.hero--foto .hero-badge {
    background: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.72rem;
    padding: 7px 14px;
    border-radius: 6px;
}

.hero--foto .btn-outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.hero--foto .btn-outline:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 1921px) {
    .hero--foto {
        background-image: url('/images/hero-antraciet-2560.webp');
    }
}

@media (max-width: 768px) {
    .hero--foto {
        background-image:
            linear-gradient(rgba(31, 31, 31, 0.6), rgba(31, 31, 31, 0.6)),
            url('/images/hero-antraciet-1920.webp');
        padding: 56px 0 60px;
        min-height: 0;
    }
}

/* Gecentreerde sectievariant */
.sectie--midden {
    text-align: center;
}

.sectie--midden .sectie-intro {
    margin-left: auto;
    margin-right: auto;
}

.sectie--midden .video-blok {
    margin-left: auto;
    margin-right: auto;
}
/* Hero met afbeelding rechts (systeempatroon) */
.hero-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 860px) {
    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.hero-grid img {
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 1px solid var(--ink-10);
}
/* ===== 2. Vertrouwensband (wit, rand boven en onder) ===== */
.band-vertrouwen {
    background: var(--surface);
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
}

.band-vertrouwen .container {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 36px;
    row-gap: 10px;
    font-size: 0.88rem;
    color: var(--ink-70);
}

.band-vertrouwen strong {
    color: var(--ink);
}

.band-vertrouwen-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===== Sectiebasis ===== */
.sectie {
    background: var(--surface);
    padding: 56px 0;
}

.sectie--grijs {
    background: var(--muted);
}

.sectie-kop {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.sectie-intro {
    color: var(--ink-70);
    max-width: 65ch;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .sectie {
        padding: 80px 0;
    }
}

/* ===== 3. Kaartengrid (diensten/modules, wit) ===== */
.kaart-grid {
    margin-top: 32px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.kaart {
    display: flex;
    height: 100%;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--ink-10);
    background: var(--surface);
    padding: 24px;
    transition: box-shadow var(--transition);
    color: var(--ink);
}

.kaart:hover {
    box-shadow: var(--schaduw-md);
}

.kaart-icoon {
    display: inline-flex;
    height: 44px;
    width: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--geel-soft);
    color: var(--ink);
    flex-shrink: 0;
}

.kaart h3 {
    margin-top: 16px;
    font-size: 1.05rem;
    font-weight: 700;
}

.kaart p {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--ink-70);
    line-height: 1.6;
    flex: 1;
}

.kaart-link {
    margin-top: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--geel-strong);
}

a.kaart:hover h3 {
    color: var(--geel-strong);
}

.kaart-label {
    display: inline-block;
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--ink-15);
    border-radius: 100px;
    padding: 2px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-50);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ===== 4. USP-grid (grijs, zonder kaders) ===== */
.usp-grid {
    margin-top: 32px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
}

.usp {
    display: flex;
    flex-direction: column;
}

.usp .kaart-icoon {
    background: rgba(255, 224, 11, 0.25);
}

.usp h3 {
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 700;
}

.usp p {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--ink-70);
    line-height: 1.6;
}

/* ===== 5. Videoblok (wit, omkaderde poster) ===== */
.video-blok {
    margin-top: 32px;
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--muted);
    border: 1px solid var(--ink-10);
    max-width: 860px;
}

.video-blok img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--geel);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
    box-shadow: var(--schaduw-md);
}

.video-blok:hover .video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

/* ===== 6. Stappen (kaarten met nummercirkel) ===== */
.stappen-grid {
    margin-top: 32px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.stap {
    position: relative;
    border-radius: var(--radius);
    border: 1px solid var(--ink-10);
    background: var(--surface);
    padding: 24px;
}

.stap-num {
    display: inline-flex;
    height: 36px;
    width: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--geel);
    color: var(--ink);
    font-weight: 900;
}

.stap h3 {
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 700;
}

.stap p {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--ink-70);
    line-height: 1.6;
}

/* De 2-uur-USP onder de stappen */
/* Losse knoppenrij onder een sectie-inhoud */
.sectie-cta-rij {
    margin-top: 36px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Brochureformulier: compacte rij (vangnet, geen hoofd-CTA) */
.brochure-velden {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
}

.brochure-velden .form-row {
    margin: 0;
}

/* De botcheck is ruim 300px breed en past niet in een kolom van deze grid.
   Zonder deze regel belandt hij in een enkele kolom en levert de overflow op
   .form-row--turnstile een scrollbalk onder de widget op. Net als de
   verstuurknop krijgt hij daarom de volle breedte. */
.brochure-velden .form-row--turnstile {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .brochure-velden {
        grid-template-columns: 1fr;
    }
}

/* ===== 7. Reviews (grijs; kaarten wit met lichte schaduw) =====
   De inhoud wordt door de build gegenereerd (content/reviews.json). */
.reviews-kop-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.reviews-samenvatting {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviews-cijfer {
    font-size: 2rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
}

.reviews-samenvatting-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.85rem;
    color: var(--ink-70);
}

.review-strip-sterren,
.review-card-sterren {
    display: inline-flex;
    gap: 2px;
    color: #f5b400;
}

.review-strip-sterren .ster {
    display: block;
}

.reviews-grid {
    margin-top: 28px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
}

.review-card {
    border-radius: var(--radius);
    background: var(--surface);
    padding: 20px;
    box-shadow: var(--schaduw-sm);
    border: 1px solid var(--ink-5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.review-card-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-card-tekst {
    font-size: 0.9rem;
    color: var(--ink-80);
    line-height: 1.6;
    flex-grow: 1;
}

.review-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.review-card-naam {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.review-card-datum {
    font-size: 0.75rem;
    color: var(--ink-50);
}

/* Compacte reviewregel: sober, zelfde stijl als omliggende tekst */
.review-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-70);
    font-size: 0.88rem;
}

.review-strip--licht {
    background: var(--surface);
}

.review-strip-tekst strong {
    color: var(--ink);
}

/* ===== 8. Blob-banner (persoonlijk blok, patroon van de oude growrs.nl) ===== */
.blob-banner {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 24px 0;
}

.blob-banner-tekst {
    flex: 1;
}

.blob-banner h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 900;
    line-height: 1.15;
    max-width: 18ch;
}

.blob-banner-tekst > p {
    margin-top: 14px;
    max-width: 52ch;
    color: var(--ink-70);
}

.blob-banner .btn {
    margin-top: 24px;
}

.blob-banner-contact {
    margin-top: 14px;
    font-size: 0.95rem;
}

.blob-banner-contact a {
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blob-banner-foto {
    flex-shrink: 0;
    width: min(420px, 36vw);
}

.blob-banner-foto img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== 9. FAQ (wit, lijst met scheidingslijnen, links) ===== */
.faq-list {
    margin-top: 28px;
    max-width: 760px;
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
}

.faq-item {
    border-bottom: 1px solid var(--ink-10);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
    gap: 16px;
}

.faq-toggle {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--geel-strong);
    flex-shrink: 0;
    transition: transform var(--transition);
    width: 24px;
    text-align: center;
    line-height: 1;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 420px;
}

.faq-answer p {
    font-size: 0.93rem;
    color: var(--ink-70);
    line-height: 1.7;
    padding-bottom: 16px;
}

/* ===== 10. Slotsectie met boeking (grijs) ===== */
.boeking-kop {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
}

.boeking-kop .sectie-kop {
    margin-bottom: 10px;
}

.boeking-kop p {
    color: var(--ink-70);
}

/* Elke ankersprong landt onder de sticky header, sitebreed. Het anker van de
   boekingssectie zit op de sectie zelf, zodat kop en intro mee in beeld komen.
   Header is 76px op desktop en 64px op mobiel; hier alleen de ruimte om de
   header heen, niet meer (zie de opmerking bij html hierboven). */
[id] {
    scroll-margin-top: 92px;
}

@media (max-width: 768px) {
    [id] {
        scroll-margin-top: 76px;
    }
}

.booking-embed {
    /* Geen eigen rand of vlak: het widget heeft binnenin al een kader,
       twee ringen om elkaar heen oogt rommelig. */
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    min-height: 520px;
}

/* Laadindicator zolang het GHL-widget zich nog verstopt (anti-flikker-fase).
   Zodra het widget klaar is, schuift het iframe (z-index 1, witte achtergrond)
   over de spinner heen. */
.booking-embed::before {
    content: "";
    position: absolute;
    top: 140px;
    left: 50%;
    margin-left: -18px;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    border: 3px solid var(--ink-10);
    border-top-color: var(--geel);
    animation: boeking-tol 0.9s linear infinite;
}

.booking-embed::after {
    content: "Een moment, de agenda wordt geladen...";
    position: absolute;
    top: 196px;
    left: 24px;
    right: 24px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ink-50);
}

.booking-embed iframe {
    position: relative;
    z-index: 1;
    background: #fff;
    /* form_embed.js zet zelf overflow:auto op het iframe; daardoor flitst er
       een scrollbalk bij het wisselen van maand. Alle stappen passen binnen de
       max-height (hoogste gemeten waarde is 592px), dus hier mag hij dicht.
       !important is nodig om de inline stijl van dat script te overrulen. */
    overflow: hidden !important;
}

@keyframes boeking-tol {
    to { transform: rotate(360deg); }
}

.booking-embed--fallback {
    padding: 44px 32px;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.8;
    min-height: 0;
}

.booking-embed--fallback::before,
.booking-embed--fallback::after {
    content: none;
}

.booking-embed--fallback a {
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   SUBPAGINA'S: artikel-layout (kruimelpad + doorlopende flow)
   ============================================================ */
.artikel {
    padding: 24px 0 56px;
}

@media (min-width: 768px) {
    .artikel {
        padding: 24px 0 80px;
    }
}

.kruimelpad {
    font-size: 0.82rem;
    color: var(--ink-50);
    margin-bottom: 24px;
}

.kruimelpad a {
    color: var(--ink-70);
}

.kruimelpad a:hover {
    text-decoration: underline;
}

.artikel h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    max-width: 800px;
}

.artikel-intro {
    margin-top: 12px;
    max-width: 65ch;
    color: var(--ink-80);
    font-size: 1.08rem;
    line-height: 1.7;
}

/* Terugkerend ritme binnen een artikel */
.artikel-deel {
    margin-top: 56px;
}

.artikel-deel h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.artikel-deel > p {
    margin-top: 12px;
    max-width: 70ch;
    color: var(--ink-80);
    line-height: 1.75;
}

/* Tijdlijn-badge boven de verhaalstappen (hoe-het-werkt) */
.tijd-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--geel-soft);
    border: 1px solid rgba(138, 117, 0, 0.2);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 100px;
}

.tijd-badge + h2 {
    margin-top: 10px;
}

.artikel-grid {
    margin-top: 24px;
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.artikel-grid img {
    border-radius: var(--radius);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Spiegelvariant: chat links, tekst rechts (zigzag-ritme op hoe-het-werkt) */
.artikel-grid--spiegel > :first-child {
    order: 2;
}

.artikel-tekst p {
    color: var(--ink-80);
    line-height: 1.75;
    margin-bottom: 14px;
}

.artikel-tekst h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 20px 0 6px;
}

/* Grijs binnenblok (zoals de offerte-hub infokaart) */
.blok-grijs {
    margin-top: 24px;
    border-radius: var(--radius);
    background: var(--muted);
    padding: 24px;
}

.blok-grijs h3 {
    font-weight: 700;
    font-size: 1.02rem;
}

.blok-grijs p {
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--ink-70);
    line-height: 1.6;
}

/* Knop direct onder de tekst van een grijs blok (voorheen inline style) */
.blok-grijs > .btn {
    margin-top: 14px;
}

/* Contact-tegels (border-2, hover geel) */
.tegel-grid {
    margin-top: 24px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tegel {
    border-radius: var(--radius);
    border: 2px solid var(--ink-10);
    padding: 20px;
    transition: border-color var(--transition);
    display: block;
    color: var(--ink);
    background: var(--surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.tegel:hover {
    border-color: var(--geel);
}

.tegel-titel {
    display: block;
    font-weight: 700;
    color: var(--ink);
}

.tegel-sub {
    margin-top: 4px;
    display: block;
    font-size: 0.88rem;
    color: var(--ink-70);
}

/* Vervolgblok in de artikel-flow (contact: formulier onder de routetegels) */
.contact-vervolg {
    margin-top: 48px;
}

/* Contactgegevens: label-waarde-lijst naast het formulier (MIB-patroon) */
.contactgegevens-lijst {
    display: grid;
    gap: 2px;
}

.contactgegeven-label {
    margin-top: 14px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink);
}

.contactgegeven-label:first-child {
    margin-top: 0;
}

.contactgegevens-lijst a {
    font-weight: 700;
    color: var(--geel-strong);
}

/* Chips (werkt-met, kanalen) */
.chip-rij {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    border-radius: 100px;
    border: 1px solid var(--ink-15);
    background: var(--surface);
    padding: 7px 16px;
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ink);
}

.chip--stippel {
    border-style: dashed;
    color: var(--ink-50);
}

a.chip {
    transition: var(--transition);
}

a.chip:hover {
    border-color: var(--geel-strong);
    color: var(--geel-strong);
}

/* Dialoogvoorbeeld (chatbubbels) */
.chat-snippet {
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.chat-bubbel {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 88%;
}

.chat-bubbel--klant {
    background: var(--muted);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-bubbel--agent {
    background: var(--geel-soft);
    border: 1px solid rgba(138, 117, 0, 0.2);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-snippet-tijd {
    font-size: 0.72rem;
    color: var(--ink-50);
    align-self: center;
    padding: 2px 0;
}

/* ============================================================
   Wat je krijgt: de lus als genummerde momenten
   (momentkop, compacte modulerijen, winstregel, brugzin,
   scanbare checklijst)
   ============================================================ */

/* Momentkop: geel nummerrondje (hergebruik .stap-num) + label + h2 */
.moment-kop {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.moment-kop .stap-num {
    flex-shrink: 0;
    margin-top: 4px;
}

.moment-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-50);
    margin-bottom: 2px;
}

/* Compacte modulerij: icoon + titel + een zin. Bewust zonder kaartkader
   en zonder hover: dit zijn geen links, dus geen klik-affordance. */
.module-lijst {
    margin-top: 24px;
    list-style: none;
    display: grid;
    gap: 16px;
}

.module-rij {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.module-rij .kaart-icoon {
    height: 38px;
    width: 38px;
}

.module-rij .kaart-icoon svg {
    width: 18px;
    height: 18px;
}

.module-rij h3 {
    font-size: 0.95rem;
    font-weight: 700;
}

.module-rij p {
    margin-top: 2px;
    font-size: 0.88rem;
    color: var(--ink-70);
    line-height: 1.6;
    max-width: 62ch;
}

/* De opbrengst van een moment: groen vinkje + vette zin.
   p-selector: wint zo van .artikel-deel > p (zelfde specificiteit, later). */
p.moment-winst {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.65;
    max-width: 62ch;
}

.moment-winst svg {
    flex-shrink: 0;
    margin-top: 3px;
}

/* Overdrachtszin naar het volgende moment: geel streepje links */
p.fase-brug {
    margin-top: 20px;
    padding-left: 14px;
    border-left: 3px solid var(--geel);
    font-size: 0.95rem;
    color: var(--ink-70);
    line-height: 1.65;
    max-width: 62ch;
}

/* Microcopy onder de CTA-rij binnen de artikel-flow */
.artikel-deel > p.hero-microcopy {
    margin-top: 14px;
    color: var(--ink-50);
    line-height: 1.5;
    max-width: none;
}

/* Afsluiter van de Onder de streep-band, boven de rekentool-knop */
.streep-slot {
    margin-top: 32px;
    color: var(--ink-70);
    max-width: 65ch;
}

.streep-slot + .sectie-cta-rij {
    margin-top: 16px;
}

/* Scanbare inventaris: alleen titels, met vinkjes */
.checklijst {
    margin-top: 20px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 32px;
    max-width: 720px;
}

.checklijst li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
}

.checklijst svg {
    flex-shrink: 0;
    margin-top: 3px;
}

@media (max-width: 560px) {
    .checklijst {
        grid-template-columns: 1fr;
    }
}

/* ===== Slot-CTA (grijs, gecentreerd) ===== */
.cta-eind {
    background: var(--muted);
    padding: 56px 0;
    text-align: center;
}

@media (min-width: 768px) {
    .cta-eind {
        padding: 80px 0;
    }
}

.cta-eind h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-eind p {
    color: var(--ink-70);
    max-width: 56ch;
    margin: 0 auto 24px;
}

.cta-eind .hero-cta-alt {
    display: block;
    margin-top: 16px;
}

/* ============================================================
   FORMULIEREN
   ============================================================ */
.standaard-form {
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius);
    padding: 28px;
    text-align: left;
}

/* Cloudflare rendert de Turnstile-widget op een vaste 300px. In de
   formulierkaart op mobiel past dat niet en werd de hele pagina horizontaal
   scrollbaar. zoom schaalt de widget ook in de layout mee (transform doet dat
   niet); de scrollbare rij is het vangnet voor extra smalle schermen. */
.form-row--turnstile {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .cf-turnstile {
        zoom: 0.8;
    }
}

.standaard-form .form-row {
    margin-bottom: 16px;
}

.standaard-form label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--ink);
}

.standaard-form input[type="text"],
.standaard-form input[type="email"],
.standaard-form input[type="tel"],
.standaard-form input[type="url"],
.standaard-form select,
.standaard-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ink-15);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--transition);
}

.standaard-form textarea {
    min-height: 110px;
    resize: vertical;
}

.standaard-form input:focus,
.standaard-form select:focus,
.standaard-form textarea:focus {
    border-color: var(--ink);
    outline: none;
}

.standaard-form .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
    margin-top: 4px;
}

.standaard-form .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.92rem;
    margin-bottom: 0;
    cursor: pointer;
}

.standaard-form .checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--geel);
}

.standaard-form .hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.standaard-form .form-submit {
    margin-top: 8px;
}

.standaard-form .form-footer {
    margin-top: 16px;
    color: var(--ink-50);
    font-size: 0.82rem;
}

.standaard-form .form-footer a {
    color: var(--ink);
    text-decoration: underline;
}

.standaard-form .success,
.roi-form .success {
    font-size: 1.02rem;
    color: var(--green);
    font-weight: 700;
    padding: 24px 0;
    text-align: center;
}

/* ===== Rekentool (inline bij de uitleg) ===== */
.rekenblok {
    margin-top: 24px;
    border-radius: var(--radius);
    background: var(--muted);
    padding: 24px;
    max-width: 720px;
}

.rekenblok h3 {
    font-weight: 700;
    font-size: 1.05rem;
}

.rekenblok-sub {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--ink-70);
}

.rekenblok-velden {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rekenblok-veld {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rekenblok-veld label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-70);
}

.rekenblok-veld input {
    padding: 11px 12px;
    border: 1px solid var(--ink-15);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--ink);
}

.rekenblok-veld input:focus {
    border-color: var(--ink);
    outline: none;
}

.rekenblok-resultaat {
    margin-top: 20px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--ink-10);
    border-radius: var(--radius);
}

.rekenblok-resultaat-label {
    font-size: 0.82rem;
    color: var(--ink-70);
}

.rekenblok-bedrag {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
}

.rekenblok-voetnoot {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--ink-50);
}

.rekenblok-acties {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.rekenblok-mail {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rekenblok-mail input {
    flex: 1;
    min-width: 200px;
    padding: 11px 12px;
    border: 1px solid var(--ink-15);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--surface);
}

.rekenblok-mail input:focus {
    border-color: var(--ink);
    outline: none;
}

.rekenblok-mail-ok {
    color: var(--green);
    font-weight: 700;
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    .rekenblok-velden {
        grid-template-columns: 1fr;
    }
}
/* ===== Prose (juridische pagina's) ===== */
.prose-sectie {
    background: var(--surface);
    padding: 40px 0 72px;
}

.prose {
    max-width: 760px;
}

.prose h1 {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 900;
    margin-bottom: 12px;
}

.prose .prose-intro {
    color: var(--ink-70);
    margin-bottom: 40px;
    font-size: 1.02rem;
    line-height: 1.7;
}

.prose h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 40px 0 12px;
}

.prose h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 28px 0 8px;
}

.prose p {
    margin-bottom: 14px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ink);
}

.prose ul, .prose ol {
    margin: 0 0 14px 22px;
    font-size: 0.95rem;
    line-height: 1.75;
}

.prose li {
    margin-bottom: 6px;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

.prose .prose-meta {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--ink-10);
    font-size: 0.82rem;
    color: var(--ink-50);
}

/* ===== Nieuwsbrief (pre-footer, donker) ===== */
.newsletter {
    padding: 40px 0;
    background: var(--donker);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.newsletter-text h3 {
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 4px;
}

.newsletter-text p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Het formulier zelf is een blok met twee lagen: de rij met velden en knop, en
   daaronder de botcheck. Bewust geen flex met wrap op het formulier: een
   wrappende flexcontainer meet zijn breedte alsof alles op een rij staat, dus
   dan zou de 300px brede widget de hele strip oprekken zodra hij verschijnt. */
.newsletter-form {
    flex-shrink: 0;
}

.newsletter-rij {
    display: flex;
    gap: 8px;
}

/* De widget wordt pas gerenderd zodra iemand het formulier aanraakt, dus tot dat
   moment neemt dit blok geen ruimte in en blijft de footer rustig. */
.newsletter-turnstile {
    margin-top: 8px;
}

.newsletter-turnstile:empty {
    display: none;
    margin-top: 0;
}

.newsletter-form input {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius);
    color: white;
    font-family: inherit;
    font-size: 0.88rem;
    /* Twee velden naast de knop: smal genoeg om op een rij te passen naast de
       tekst links, op mobiel rekt de kolomstand ze weer op. */
    min-width: 0;
    width: 168px;
}

.newsletter-form input[type="email"] {
    width: 208px;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input:focus {
    border-color: var(--geel);
    outline: none;
}

.newsletter-form .hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* De generieke handler vervangt het formulier door <p class="success">. */
.newsletter-form .success,
.newsletter-success {
    color: #7ddba8;
    font-weight: 700;
    font-size: 0.93rem;
}

/* ===== Footer (donker) ===== */
/* ===== Subfooter: persoonlijk contactblok boven de footer =====
   Achtergrond is #FFDF00: de kleur van de fotoachtergrond, zodat de
   uitgeknipte foto naadloos in de band opgaat (zie CLAUDE.md). */
.subfooter {
    /* Vast op de achtergrondkleur die in de foto van Thijs zit gebakken.
       NIET gelijktrekken met var(--geel): elk verschil geeft een zichtbare
       naad rond de foto. */
    background: #FFDF00;
}

.subfooter-inner {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 88px;
}

.subfooter-foto {
    display: block;
    width: 215px;
    height: auto;
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: 24px;
}

.subfooter-tekst {
    padding: 48px 0 40px;
}

.subfooter-tekst h2 {
    font-size: 1.35rem;
    font-weight: 900;
}

.subfooter-tekst > p {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--ink-80);
}

.subfooter-contact {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.subfooter-contact a {
    margin-top: 18px;
    font-weight: 900;
    color: var(--ink);
}

.subfooter-contact a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.subfooter-naam {
    margin-top: 16px;
    font-size: 0.8rem;
    color: rgba(31, 31, 31, 0.55);
}

@media (max-width: 700px) {
    .subfooter-inner {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0;
    }

    .subfooter-tekst {
        padding: 36px 0 8px;
        text-align: center;
    }

    .subfooter-contact {
        justify-content: center;
    }

    .subfooter-foto {
        width: 175px;
    }
}

.footer {
    padding: 48px 0 24px;
    background: var(--donker);
}

.footer-grid {
    /* Merkkolom vast, linkkolommen vullen de rest automatisch:
       een kolom toevoegen is een blok HTML, geen CSS-wijziging. */
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 40px 32px;
    margin-bottom: 40px;
}

@media (max-width: 1000px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-kolom-merk {
        grid-column: 1 / -1;
    }
}

.footer-kolom {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-kolom h4 {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}

.footer-kolom a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
}

.footer-kolom a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-kolom-merk img {
    margin-bottom: 8px;
}

.footer-merk-regel {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.footer-vertrouwen {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
}

.footer-nap {
    font-style: normal;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
}

.footer-nap a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}


.footer-onder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
}

.footer-onder p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ===== Sticky mobiele balk (3 kolommen, systeempatroon) ===== */
.mobile-bottom-bar {
    display: none;
}

@media (max-width: 768px) {
    /* Onderbalk volgens totaal-handoff: antraciet, brede CTA + icoonknoppen.
       WhatsApp blijft erin (bewezen kanaal), als icoonknop naast de belknop. */
    .mobile-bottom-bar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: 52px 52px 1fr;
        gap: 8px;
        align-items: center;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background: var(--ink);
        /* Boven de vouw blijft de balk uit beeld (main.js zet is-zichtbaar zodra
           er gescrold wordt): de hero mag eerst zijn eigen werk doen. */
        transform: translateY(calc(100% + 12px));
        transition: transform 0.25s ease;
    }

    .mobile-bottom-bar.is-zichtbaar {
        transform: translateY(0);
    }

    /* De consentbanner wordt door main.js achteraan de body gezet, dus na de
       balk: zodra de balk in beeld schuift, schuift de banner erboven. */
    .mobile-bottom-bar.is-zichtbaar ~ .consent-banner {
        bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .mbb-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: transparent;
        color: #fff;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
    }

    .mbb-btn--accent {
        background: var(--geel);
        border-color: var(--geel);
        color: var(--ink);
        font-weight: 900;
        min-height: 48px;
    }

    /* Ruimte voor de vaste balk in de footer zelf, niet op de body: met
       padding op de body bleef er een witte strook onder de footer staan.
       Alleen op pagina's die de balk ook echt hebben (geen_mobilebar). */
    body:has(.mobile-bottom-bar) .footer {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
}

/* ===== Consentbanner ===== */
.consent-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 480px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--ink-15);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    z-index: 1500;
    font-size: 0.88rem;
    line-height: 1.6;
    transition: bottom 0.25s ease;
}

.consent-banner p {
    margin-bottom: 14px;
}

.consent-banner a {
    text-decoration: underline;
}

.consent-knoppen {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.consent-knoppen .btn {
    padding: 10px 20px;
    font-size: 0.85rem;
}

/* ===== Animaties ===== */
html.js .fade-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

html.js .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    html.js .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
    .kaart-grid,
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .usp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 48px 0 56px;
    }

    .hero-sub {
        font-size: 1.02rem;
    }

    .kaart-grid,
    .stappen-grid,
    .reviews-grid,
    .tegel-grid {
        grid-template-columns: 1fr;
    }

    .artikel-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .artikel-grid--spiegel > :first-child {
        order: 0;
    }

    .blob-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }

    .blob-banner-foto {
        align-self: center;
        width: min(320px, 80vw);
    }

    .newsletter-inner {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        width: 100%;
        max-width: 320px;
    }

    .newsletter-rij {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form input[type="email"] {
        width: 100%;
    }

    .newsletter-form input {
        min-width: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-onder {
        flex-direction: column;
        text-align: center;
    }

    .roi-fields-grid,
    .roi-doc-row {
        grid-template-columns: 1fr;
    }

    .roi-doc-remove {
        justify-self: end;
    }

    .standaard-form {
        padding: 24px 20px;
    }

    .standaard-form .checkbox-group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .usp-grid {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 16px;
    }

    .roi-form {
        padding: 24px 18px;
    }
}

/* ============================================================
   REDESIGN 2a/2b/2c: gedeelde componenten (handoff 4-8-2026)
   Alleen nieuwe classnamen; bestaande componenten blijven
   onaangeroerd. Zie docs/plannen/redesign-verwerking.md.
   ============================================================ */

/* ----- Nav: actief menu-item in geel (via bodyclass uit het meta-blok) ----- */
body.p-hoe-het-werkt .site-nav a[href="/hoe-het-werkt"],
body.p-wat-je-krijgt .site-nav a[href="/wat-je-krijgt"],
body.p-klanten .site-nav a[href="/klanten"],
body.p-contact .site-nav a[href="/contact"] {
    color: var(--geel);
    font-weight: 900;
}

/* ----- Secties: donkere band en koele grijze band ----- */
.band-donker {
    background: var(--ink);
    color: var(--tekst-op-donker);
    padding: 56px 0;
}

.band-donker h1, .band-donker h2, .band-donker h3, .band-donker h4 {
    color: #fff;
}

.band-donker :focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 2px var(--ink);
}

.band-grijs {
    background: var(--grijs-koel);
    padding: 56px 0;
}

@media (min-width: 768px) {
    .band-donker, .band-grijs { padding: 64px 0; }
}

/* ----- Typografische hulpen ----- */
.eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
}

.band-donker .eyebrow, .eyebrow--geel {
    color: var(--geel);
}

.kop-groot {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.025em;
}

.kop-sectie {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.kruimelpad--donker {
    color: var(--muted-op-donker);
    margin-top: 16px;
}

.kruimelpad--donker a {
    color: var(--tekst-op-donker);
}

/* ----- Cijfers (stats) ----- */
.cijfer-rij {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    border-top: 1px solid var(--rand-koel);
    padding-top: 26px;
    margin-top: 40px;
}

/* Kleurprincipe totaal-handoff: cijfers zijn antraciet op licht;
   geel alleen binnen donkere accenten (voetbalken, panelen). */
.cijfer-getal {
    display: block;
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: clamp(1.7rem, 2.6vw, 2.375rem);
    line-height: 1;
    color: var(--ink);
}

.cijfer-label {
    display: block;
    margin-top: 8px;
    font-size: 0.92rem;
    color: var(--ink-70);
}

.band-donker .cijfer-rij {
    border-top-color: var(--band-rand);
}

.band-donker .cijfer-getal {
    color: var(--geel);
}

.band-donker .cijfer-label {
    color: var(--tekst-op-donker);
}

/* Geel cijferpaneel (M.I.B.-resultaten, rekentool-uitkomsten) */
.paneel-geel {
    background: var(--geel);
    color: var(--ink);
    border-radius: 18px;
    padding: 26px 28px;
}

.paneel-geel .eyebrow {
    color: rgba(32, 32, 32, 0.6);
}

.paneel-geel .cijfer-getal {
    color: var(--ink);
    font-size: clamp(2rem, 3.4vw, 2.875rem);
}

.paneel-geel p {
    color: #3A3A3A;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-top: 10px;
}

.paneel-geel .paneel-geel-disclaimer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(32, 32, 32, 0.25);
    font-size: 0.78rem;
    color: rgba(32, 32, 32, 0.6);
}

/* ----- Knoppen (nieuwe varianten) ----- */
.btn-donker {
    background: var(--ink);
    color: #fff;
}

.btn-donker:hover {
    background: var(--band-kaart);
    color: #fff;
}

.band-donker .btn-outline {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.band-donker .btn-outline:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.link-tertiair {
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.band-donker .link-tertiair {
    color: var(--tekst-op-donker);
}

.band-donker .link-tertiair:hover {
    color: #fff;
}

.band-donker .review-strip {
    color: var(--tekst-op-donker);
}

.band-donker .review-strip-tekst strong {
    color: #fff;
}

/* ----- CTA-band (vaste hierarchie: gesprek, rekentool, brochure) ----- */
.cta-band-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: center;
}

.cta-band-knoppen {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.cta-band-micro {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--ink-50);
}

.cta-band-micro a {
    color: var(--ink-70);
    font-weight: 700;
}

.band-donker .cta-band-micro {
    color: var(--muted-op-donker);
}

.band-donker .cta-band-micro a {
    color: var(--tekst-op-donker);
}

/* ----- Slanke footerbalk met volgende stap ----- */
.volgende-balk {
    background: var(--grijs-koel);
    color: var(--ink-50);
    font-size: 0.85rem;
}

.volgende-balk .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
}

.volgende-balk a {
    color: var(--ink);
    font-weight: 700;
}

/* ----- Kaarten (redesign-varianten) ----- */
.kaart-v2 {
    background: var(--surface);
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-kaart);
    padding: 24px;
    transition: border-color var(--transition);
}

a.kaart-v2 {
    display: block;
    color: var(--ink);
}

a.kaart-v2:hover {
    border-color: var(--rand-koel-2);
}

/* Toegankelijk verbergen (kop voor screenreaders en outline) */
.visueel-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.reviews-alle {
    margin-top: 28px;
}

.cta-band-foto {
    width: 100%;
    max-width: 300px;
    height: auto;
    justify-self: end;
}

.case-kaart-id {
    display: flex;
    align-items: center;
    gap: 14px;
}

.case-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    flex-shrink: 0;
}

.kaart-v2--donker {
    background: var(--band-kaart);
    border: 1px solid var(--band-rand-2);
    color: var(--tekst-op-donker);
}

.kaart-v2--donker h3, .kaart-v2--donker h4 {
    color: #fff;
}

/* Momentkaart (2b): kop met geel nummervierkant, chips, donkere voetbalk */
.momentkaart {
    border: 1px solid var(--rand-koel);
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface);
}

.momentkaart-body {
    padding: 28px 32px;
}

.momentkaart-kop {
    display: flex;
    align-items: center;
    gap: 14px;
}

.moment-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--geel);
    color: var(--ink);
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.momentkaart h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.12;
    margin-top: 14px;
}

.momentkaart-body > p {
    margin-top: 10px;
    color: var(--ink-70);
    line-height: 1.65;
    max-width: 62ch;
}

.onderdeel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.onderdeel-chip {
    display: inline-flex;
    background: var(--grijs-koel);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.momentkaart-voet {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--ink);
    padding: 18px 32px;
}

.momentkaart-voet .cijfer-getal {
    font-size: 1.4rem;
    color: var(--geel);
}

.momentkaart-voet p {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
}

/* ----- Filterchips ----- */
.filterchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filterchip {
    border: 1px solid var(--rand-koel-2);
    background: var(--surface);
    color: var(--ink-70);
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.filterchip[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 900;
}

/* Dimmen in plaats van verbergen: lijst blijft compleet in beeld */
[data-filter] [data-groep] {
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

[data-filter="aanvragen"] [data-groep]:not([data-groep~="aanvragen"]),
[data-filter="agenda"] [data-groep]:not([data-groep~="agenda"]),
[data-filter="offertes"] [data-groep]:not([data-groep~="offertes"]),
[data-filter="vindbaar"] [data-groep]:not([data-groep~="vindbaar"]),
[data-filter="installatie"] [data-groep]:not([data-groep~="installatie"]) {
    opacity: 0.34;
    border-color: var(--grijs-koel);
}

/* ----- Integratie-pills (werkt met wat je al hebt) ----- */
.pill-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.pill {
    display: inline-flex;
    border: 1px solid var(--rand-koel);
    background: var(--surface);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
}

/* ----- Telefoonframe-mock ----- */
.telefoonmock {
    background: var(--ink);
    border-radius: 34px;
    padding: 12px;
    max-width: 340px;
    box-shadow: 0 30px 60px -30px rgba(32, 32, 32, 0.45);
}

.telefoonmock-scherm {
    background: var(--grijs-koel);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.telefoonmock-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    padding: 12px 14px;
    border-bottom: 1px solid var(--rand-koel);
}

.telefoonmock-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.telefoonmock-naam {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

.telefoonmock-kanaal {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--ink-50);
}

.telefoonmock-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}

.tm-bubbel {
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 85%;
}

.tm-bubbel--assistent {
    background: var(--ink);
    color: #fff;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.tm-bubbel--klant {
    background: var(--surface);
    color: var(--ink);
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.tm-melding {
    background: var(--surface);
    border-left: 3px solid var(--geel);
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink);
    max-width: none;
}

.tm-melding--groen { border-left-color: #25A244; }
.tm-melding--rood { border-left-color: var(--red); }

.tm-melding-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 3px;
}

.tm-tijd {
    align-self: center;
    font-size: 0.7rem;
    color: var(--ink-50);
}

.telefoonmock--sticky {
    position: sticky;
    top: 96px;
}

/* ----- Browservenster-mock ----- */
.browsermock {
    background: var(--surface);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 24px 50px -24px rgba(32, 32, 32, 0.3);
}

.browsermock-balk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 10px;
}

.browsermock-bol {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rand-koel-2);
}

.browsermock-url {
    flex: 1;
    background: var(--grijs-koel);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 0.75rem;
    color: var(--ink-50);
}

.browsermock--hero-onder {
    border-radius: 14px 14px 0 0;
    align-self: end;
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.5);
}

/* ----- Beeld-placeholder (tot echte assets er zijn) ----- */
.beeld-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--rand-koel-2);
    border-radius: 12px;
    background: var(--grijs-koel);
    color: var(--ink-50);
    font-size: 0.82rem;
    padding: 16px;
    min-height: 150px;
}

.band-donker .beeld-placeholder {
    background: var(--band-kaart);
    border-color: var(--band-rand-2);
    color: var(--muted-op-donker);
}

/* ----- Reviewtag op reviewkaarten ----- */
.review-tag {
    margin-left: auto;
    margin-right: 8px;
    background: var(--grijs-koel);
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-70);
}

/* ----- Pagina 2a: /hoe-het-werkt ----- */
.hhw-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
    margin-top: 24px;
}

.trust-rij--donker {
    color: var(--tekst-op-donker);
    margin-top: 18px;
}

.hhw-rail-band {
    background: var(--surface);
    padding: 40px 0 0;
}

/* Geen scheidingslijn boven de rail: de band is wit en loopt door in de
   stapdetail eronder, een streep knipt dat onnodig doormidden. */
.hhw-rail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-top: 26px;
}

.hhw-rail [role="tab"] {
    background: none;
    border: none;
    padding: 0 18px 0 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.rail-balk {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--rand-koel-2);
    margin-bottom: 14px;
    transition: background 0.2s ease;
}

.hhw-rail [aria-selected="true"] .rail-balk {
    background: var(--geel);
}

.rail-tijd {
    display: block;
    font-weight: 900;
    font-size: 1rem;
    color: var(--ink-50);
}

.hhw-rail [aria-selected="true"] .rail-tijd {
    color: var(--ink);
}

.rail-label {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--ink-50);
}

.hhw-rail [aria-selected="true"] .rail-label {
    color: var(--ink-70);
}

.hhw-stapdetail {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 56px;
    align-items: start;
}

.stap-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 18px;
}

.stap-badge-stip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--geel);
    animation: pulseRing 2.4s infinite;
}

.stap-tekst {
    margin-top: 14px;
    font-size: 1.05rem;
    color: var(--ink-70);
    line-height: 1.65;
    max-width: 60ch;
}

.stap-bullets {
    list-style: none;
    margin-top: 20px;
    display: grid;
    gap: 12px;
}

.stap-bullets li {
    position: relative;
    padding-left: 32px;
    font-weight: 700;
    font-size: 0.98rem;
}

.stap-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--geel);
}

.opbrengst-blok {
    margin-top: 24px;
    background: var(--grijs-koel);
    border-radius: 14px;
    padding: 22px 24px;
}

.opbrengst-blok .eyebrow {
    margin-bottom: 8px;
}

.opbrengst-blok p {
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--ink);
}

.stap-nav {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.hhw-systeem-kop {
    max-width: 24ch;
}

.hhw-systeem-intro {
    margin-top: 14px;
    max-width: 62ch;
}

.hhw-systeem-grid {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 44px;
}

.lus {
    position: relative;
    width: 460px;
    height: 460px;
}

.lus-cirkel {
    position: absolute;
    left: 80px;
    top: 80px;
    width: 300px;
    height: 300px;
    border: 1px dashed var(--rand-koel-2);
    border-radius: 50%;
}

.lus-midden {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--ink-70);
    font-size: 0.8rem;
    max-width: 150px;
}

.lus-midden strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.1rem;
}

.lus-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 116px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

.lus-node:nth-of-type(1) { left: 230px; top: 78px; }
.lus-node:nth-of-type(2) { left: 362px; top: 154px; }
.lus-node:nth-of-type(3) { left: 362px; top: 306px; }
.lus-node:nth-of-type(4) { left: 230px; top: 382px; }
.lus-node:nth-of-type(5) { left: 98px; top: 306px; }
.lus-node:nth-of-type(6) { left: 98px; top: 154px; }

.lus-nr {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.15rem;
    background: var(--surface);
    color: var(--ink-70);
    border: 1px solid var(--rand-koel-2);
    transition: background 0.2s ease;
}

.lus-node[aria-selected="true"] .lus-nr {
    background: var(--geel);
    color: var(--ink);
    border: none;
    animation: pulseRing 2.4s infinite;
}

.lus-label {
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--ink-50);
}

.lus-node[aria-selected="true"] .lus-label {
    color: var(--ink);
}

.lus-paneel {
    padding: 34px;
}

.lus-paneel h3 {
    font-size: 1.5rem;
    line-height: 1.15;
}

.lus-paneel > p {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.65;
}

.lus-opbrengst {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--band-rand);
}

.lus-opbrengst .eyebrow {
    margin-bottom: 6px;
}

p.lus-opbrengst {
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.25;
}

.lus-opbrengst {
    border-top-color: var(--rand-koel);
}

@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(255, 223, 5, 0.5); }
    70% { box-shadow: 0 0 0 14px rgba(255, 223, 5, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 223, 5, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .stap-badge-stip,
    .lus-node[aria-selected="true"] .lus-nr {
        animation: none;
    }
}

.hhw-controle-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start;
}

.controle-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.controle-kaarten .kaart-v2 {
    padding: 20px;
}

.controle-kaarten h3 {
    font-size: 1rem;
}

.controle-kaarten p {
    margin-top: 6px;
    font-size: 0.86rem;
    color: var(--ink-70);
    line-height: 1.55;
}

.controle-grijs-kaart {
    background: var(--grijs-koel);
    border-radius: 14px;
    padding: 20px;
}

.hhw-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.hhw-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: start;
}

.brochure-blok {
    max-width: 760px;
}

.brochure-blok h2 {
    font-size: 1.4rem;
}

.brochure-blok > p {
    margin-top: 8px;
    color: var(--ink-70);
    max-width: 60ch;
}

/* ----- Pagina 2b: /wat-je-krijgt ----- */
.wjk-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: end;
}

.trust-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 28px;
    row-gap: 8px;
    margin-top: 24px;
    font-size: 0.88rem;
    color: var(--ink-70);
}

.lek-blok {
    background: var(--grijs-koel);
    border-radius: 18px;
    padding: 28px 30px;
}

.lek-blok h2 {
    font-size: 1.3rem;
    line-height: 1.15;
}

.lek-lijst {
    list-style: none;
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.lek-lijst li {
    font-size: 0.92rem;
    color: var(--ink-70);
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}

.lek-lijst li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--geel);
}

.lek-slot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rand-koel-2);
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--ink);
}

.momenten-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 52px;
    align-items: start;
}

.momenten-kolom {
    display: grid;
    gap: 22px;
}

.eyebrow--inkaart {
    margin-bottom: 0;
    letter-spacing: 0.1em;
}

.lijst-kop {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
}

.lijst-filter {
    max-width: 480px;
    /* Grid-item: zonder min-width 0 groeit de kolom mee met de chiprij
       (nowrap op mobiel) en wordt de hele pagina horizontaal scrollbaar. */
    min-width: 0;
}

.onderdelen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.onderdeel-kaart {
    background: var(--surface);
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-kaart);
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.onderdeel-kaart::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--geel);
}

.onderdeel-kaart h3 {
    font-size: 1.05rem;
    line-height: 1.2;
    padding-right: 20px;
}

.onderdeel-kaart p {
    margin-top: 8px;
    font-size: 0.88rem;
    color: var(--ink-70);
    line-height: 1.55;
    flex: 1;
}

.onderdeel-winst {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rand-koel);
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--ink);
    flex: 0;
}

.streep-kaarten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.streep-kaarten h3 {
    font-size: 1.1rem;
}

.streep-kaarten p {
    margin-top: 8px;
    font-size: 0.88rem;
    color: var(--ink-70);
    line-height: 1.6;
}

.cta-band-grid--breed {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.cta-band-grid--breed .kaart-v2--donker {
    padding: 30px;
}

.cta-band-grid--breed .kaart-v2--donker h3 {
    font-size: 1.3rem;
    line-height: 1.2;
}

.cta-band-grid--breed .kaart-v2--donker p {
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ----- Pagina 2c: /klanten ----- */
.klanten-hero-band {
    padding-bottom: 0;
    overflow: hidden;
}

.klanten-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
    margin-top: 24px;
}

.klanten-hero > div:first-child {
    padding-bottom: 56px;
}

.hero-tekst-donker {
    margin-top: 18px;
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.65;
}

.demo-kop-micro {
    font-size: 0.82rem;
    color: var(--ink-50);
}

.demo-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

/* Miniaturen van de demosite: vaste verhouding, zodat de drie kaarten uitlijnen */
.kaart-shot {
    display: block;
    width: 100%;
    height: auto; /* zonder dit wint het height-attribuut en steekt de foto buiten de kaart */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--rand-koel);
    border-radius: 12px;
    background: var(--grijs-koel);
}

.demo-kaarten h3 {
    margin-top: 16px;
    font-size: 1.1rem;
}

.demo-onder-link {
    margin-top: 24px;
}

.demo-kaarten p {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--ink-70);
    line-height: 1.6;
}

.case-kaart {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: var(--surface);
    border-radius: var(--radius-blok);
    overflow: hidden;
    margin-top: 32px;
}

.case-kaart-tekst {
    padding: 36px 40px;
}

.case-kaart-naam {
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--ink);
}

.case-kop {
    margin-top: 24px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
    font-family: 'Lato', ui-sans-serif, system-ui, sans-serif;
}

.case-kaart-tekst > p {
    margin-top: 8px;
    color: var(--ink-70);
    line-height: 1.65;
}

.case-quote {
    margin-top: 24px;
    background: var(--grijs-koel);
    border-radius: 14px;
    padding: 20px 24px;
    font-style: normal;
}

.case-quote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-50);
}

.case-kaart-paneel {
    background: var(--ink);
    color: var(--tekst-op-donker);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.case-cijfers {
    list-style: none;
    display: grid;
    gap: 0;
}

.case-cijfers li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--band-rand);
    font-size: 0.9rem;
}

.case-cijfers .cijfer-getal {
    font-size: 1.5rem;
    flex-shrink: 0;
    min-width: 92px;
}

/* Het donkere paneel zit in een grijze band; de band-grijs-override
   zou de cijfers anders op inktkleur zetten (onleesbaar op donker). */
.case-kaart-paneel .cijfer-getal {
    color: var(--geel);
}

.case-kaart-paneel img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: auto;
}

.meedraait-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}

.meedraait-grid h3 {
    font-size: 1.25rem;
}

.meedraait-sub {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--ink-50);
}

.meedraait-grid .kaart-v2 > p:not(.meedraait-sub) {
    margin-top: 12px;
    font-size: 0.92rem;
    color: var(--ink-70);
    line-height: 1.65;
}

.band-donker .cta-band-grid p {
    max-width: 56ch;
    margin-top: 12px;
}

/* ----- Responsive (redesign-componenten) ----- */
@media (max-width: 1024px) {
    .cta-band-grid {
        grid-template-columns: 1fr;
    }

    .telefoonmock--sticky {
        position: static;
    }

    .klanten-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .klanten-hero > div:first-child {
        padding-bottom: 0;
    }

    .demo-kaarten {
        grid-template-columns: 1fr;
    }

    .case-kaart {
        grid-template-columns: 1fr;
    }

    .meedraait-grid {
        grid-template-columns: 1fr;
    }

    .hhw-hero,
    .hhw-stapdetail,
    .hhw-controle-grid,
    .hhw-demo-grid,
    .hhw-faq-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hhw-systeem-grid {
        grid-template-columns: 1fr;
    }

    .lus {
        margin: 0 auto;
    }

    .wjk-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    .momenten-grid {
        grid-template-columns: 1fr;
    }

    .momenten-telefoon {
        display: none;
    }

    .lijst-kop {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .onderdelen-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .streep-kaarten {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .onderdelen-grid,
    .streep-kaarten {
        grid-template-columns: 1fr;
    }

    .hhw-rail {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 8px;
    }

    .hhw-rail [role="tab"] {
        min-width: 128px;
        flex-shrink: 0;
    }

    .lus {
        width: auto;
        height: auto;
        display: grid;
        gap: 10px;
    }

    .lus-cirkel,
    .lus-midden {
        display: none;
    }

    .lus-node,
    .lus-node:nth-of-type(1),
    .lus-node:nth-of-type(2),
    .lus-node:nth-of-type(3),
    .lus-node:nth-of-type(4),
    .lus-node:nth-of-type(5),
    .lus-node:nth-of-type(6) {
        position: static;
        transform: none;
        flex-direction: row;
        width: auto;
        gap: 14px;
    }

    .lus-nr {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .controle-kaarten {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cijfer-rij {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .momentkaart-body {
        padding: 22px 20px;
    }

    .momentkaart-voet {
        padding: 16px 20px;
    }

    .lijst-filter {
        max-width: none;
    }

    .filterchips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        min-width: 0;
    }

    .filterchip {
        white-space: nowrap;
        padding: 12px 16px;
    }
}

/* ============================================================
   TOTAAL-REDESIGN: paginaspecifieke fragmenten (gegenereerd 5-8-2026)
   ============================================================ */

/* ----- fragment: 2a-hoe-het-werkt.css ----- */
/* ===== 2a /hoe-het-werkt: paginaspecifieke aanvullingen (licht kleurprincipe) ===== */

/* Hero-bodytekst op lichtgrijze band (vervangt hero-tekst-donker) */
.hhw-hero-tekst {
    margin-top: 18px;
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--ink-70);
}

/* Statusbalk bovenin de sticky app-mock: antraciet is hier toegestaan accent
   (statusbalk in telefoon/app-mock, zie kleurcontract) */
.hhw-statusbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 12px 16px;
}

.hhw-statusbalk-accent {
    color: var(--geel);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Mini-knoppenrij in de melding "Jouw oordeel gevraagd" (decoratief, geen echte knoppen) */
.hhw-tm-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.hhw-tm-btn {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    font-weight: 900;
    font-size: 0.72rem;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 8px;
}

.hhw-tm-btn--licht {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rand-koel-2);
    font-weight: 700;
}

/* Melding zonder accentrand (Buiten werkgebied: geen rood meer op licht) */
.tm-melding.hhw-tm-stil {
    border-left-color: var(--rand-koel);
}

/* App-screenshot-placeholder onderin het mock-scherm */
.hhw-mock-shot {
    min-height: 120px;
    margin-top: 4px;
}

/* Eind-CTA zonder foto: enkele kolom (subfooter eronder is het persoonlijke moment) */
.hhw-cta-kolom {
    max-width: 660px;
}

.hhw-cta-tekst {
    margin-top: 14px;
    max-width: 540px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-70);
}

@media (max-width: 600px) {
    .hhw-tm-btn {
        padding: 9px 12px;
    }

    .hhw-cta-tekst {
        font-size: 1rem;
    }
}


/* ----- fragment: 2b-wat-je-krijgt.css ----- */
/* ===== 2b /wat-je-krijgt: paginaspecifieke classes (prefix wjk-) ===== */

/* "Nu drie partijen. Straks een." De sectie erboven is grijs, dus hier
   geen divider meer nodig. */

/* Koprij Werkt met: kop links, intro rechts ernaast */
.wjk-werktmet-kop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 28px;
}

.wjk-werktmet-kop .kop-sectie {
    max-width: 520px;
}

/* CTA-body op wit */
.wjk-cta-body {
    margin-top: 14px;
    max-width: 500px;
    color: var(--ink-70);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .wjk-werktmet-kop {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
    }
}

@media (max-width: 768px) {
    .wjk-bewijskaart {
        padding: 22px;
    }
}

@media (max-width: 600px) {
    .wjk-cta-body {
        font-size: 1rem;
    }
}


/* ----- fragment: 2c-klanten.css ----- */
/* ===== Pagina 2c /klanten: paginaspecifieke aanvullingen (licht kleurprincipe) ===== */

/* Hero-body op lichtgrijs (vervangt hero-tekst-donker uit de oude donkere hero) */
.klanten-hero-tekst {
    margin-top: 18px;
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--ink-70);
}

/* Aandockende browsermock: zachtere schaduw op licht (spec: 0 -18px 44px -24px) */
.klanten-hero-band .browsermock--hero-onder {
    box-shadow: 0 -18px 44px -24px rgba(32, 32, 32, 0.22);
}

/* M.I.B.-cijferpaneel: geel i.p.v. antraciet (nieuw kleurprincipe, paneel-geel).
   Overrides op .case-kaart-paneel die anders donker blijft. */
.klanten-case-paneel {
    background: var(--geel);
    color: var(--ink);
    border-radius: 0; /* de case-kaart eromheen draagt de radius */
}

.klanten-case-paneel .cijfer-getal {
    color: var(--ink);
    font-size: 2rem;
}

.klanten-case-paneel .case-cijfers li {
    border-bottom-color: rgba(32, 32, 32, 0.2);
    color: #3A3A3A;
}

/* Telefoon met screenshot in het gele paneel: staand beeld vult de hoogte beter dan een breed screenshot */
.klanten-case-mobiel {
    margin: 28px auto 0;
    max-width: 250px;
}

.klanten-case-mobiel img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 0;
    border-radius: 24px;
}

/* CTA-slotsectie (wit, zonder foto): begrensde bodybreedte */
.klanten-cta-tekst {
    margin-top: 12px;
    max-width: 56ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-70);
}

@media (max-width: 600px) {
    .klanten-case-notitie {
        padding: 18px;
    }
}


/* ----- fragment: 2d-homepage.css ----- */
/* ===== Pagina 2d: homepage (/) ===== */

/* Hero: zie .hero--foto in het homepage-bandenblok bovenaan (feedbackronde
   5-8-2026: achtergrondfoto terug, vertrouwenspunten in het wit eronder). */

/* Kaartgrids (Herkenbaar?, Wat het systeem regelt, Zo werkt het) */
.home-kaarten3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.home-kaarten3 .kaart-v2 h3 {
    font-size: 1.22rem;
    line-height: 1.18;
}

.home-kaarten3 .kaart-v2 p {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-70);
}

.home-stap .moment-num {
    margin-bottom: 14px;
}

.home-regelt-link {
    display: inline-block;
    margin-top: 16px;
}

/* Dit levert het op: kaartgrid, zie .home-kaarten4 onderaan dit bestand */
.home-stats-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.home-stats-micro {
    font-size: 0.85rem;
    color: var(--ink-50);
    max-width: 42ch;
}

/* Draait dit echt? (demo) */
.home-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.home-demo-tekst p {
    margin-top: 12px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 52ch;
}

.home-demo-grid .beeld-placeholder {
    min-height: 250px;
}

/* Eind-CTA (enkele kolom, zonder foto: subfooter is het persoonlijke moment) */
.home-eindcta .kop-sectie {
    max-width: 24ch;
}

.home-eindcta-body {
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 52ch;
}

/* Lange/korte kaartteksten: onder 768px de korte variant */
.home-kort {
    display: none;
}

@media (max-width: 1024px) {
    .home-demo-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .home-kaarten3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-mob-weg {
        display: none !important;
    }

    .home-lang {
        display: none;
    }

    .home-kort {
        display: inline;
    }

    .home-knoppen .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}


/* ----- fragment: 2e-klantcase-mib.css ----- */
/* ===== Pagina 2e: /klanten/mib-installatietechniek (prefix casemib-) ===== */

/* Hero */
.casemib-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    margin-top: 24px;
}

.casemib-id {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.casemib-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--rand-koel);
    padding: 6px;
    object-fit: contain;
}

.casemib-hero-tekst {
    margin-top: 18px;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 520px;
}

.casemib-hero-foto {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 18px;
}

/* De situatie */
.casemib-situatie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.casemib-alinea {
    color: var(--ink-70);
    line-height: 1.65;
    margin-top: 16px;
}

.casemib-kanalen {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.casemib-kanalen .kaart-v2 p {
    margin-top: 8px;
    font-size: 0.94rem;
    color: var(--ink-70);
}

/* Wat er nu draait */
.casemib-draait .kop-sectie {
    max-width: 640px;
}

.casemib-stap-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 34px;
}

.casemib-stap-kaart {
    background: var(--surface);
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-kaart);
    padding: 28px;
}

.casemib-stap-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--geel);
    color: var(--ink);
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 16px;
}

.casemib-stap-kaart p {
    margin-top: 8px;
    font-size: 0.94rem;
    color: var(--ink-70);
}

/* De nieuwe website */
.casemib-web-kop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: end;
}

.casemib-web-intro {
    margin-top: 12px;
    margin-bottom: 18px;
}

.casemib-web-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 36px;
}

/* Deze sectie staat op wit, dus de kaarten erin zijn juist grijs (omgekeerd
   t.o.v. de standaard kaart-v2, die wit op een grijze band staat). */
.casemib-web-kaarten .kaart-v2 {
    background: var(--grijs-koel);
}

.casemib-kaart-shot {
    margin-bottom: 16px;
    background: var(--surface);
}

.casemib-web-kaarten .kaart-v2 h3 {
    margin-top: 4px;
}

.casemib-web-kaarten .kaart-v2 p {
    margin-top: 8px;
    font-size: 0.94rem;
    color: var(--ink-70);
}

.casemib-fotorij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.casemib-fotorij img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
}

/* Wat hier nog aan komt */
.casemib-meten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* Staat op een grijze band, dus wit in plaats van het grijs van lek-blok */
.casemib-controle {
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--rand-koel);
}

.casemib-controle .lek-lijst {
    margin-top: 18px;
    gap: 14px;
}

.casemib-controle .lek-lijst li {
    font-size: 1rem;
    color: var(--ink);
    padding-left: 32px;
}

.casemib-controle .lek-lijst li::before {
    width: 20px;
    height: 20px;
    top: 1px;
}

/* Twee blokken die "wat wij doen" en "wat het oplevert" uit elkaar houden */
.casemib-splitsing {
    display: grid;
    gap: 22px;
    margin-top: 28px;
}

/* Donkere scheidingslijn: geel valt op deze grijze band te schreeuwerig uit */
.casemib-splitsing > div {
    padding-top: 16px;
    border-top: 2px solid var(--ink);
}

.casemib-splitsing p {
    margin-top: 8px;
    color: var(--ink-70);
}

/* Voorbehoud onder de proefpunten: kleiner en rustiger dan de lijst zelf */
.casemib-controle-noot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rand-koel);
    font-size: 0.86rem;
    color: var(--ink-50);
}

/* CTA-eindblok (enkele kolom) */
.casemib-cta .kop-sectie {
    max-width: 560px;
}

.casemib-cta .sectie-intro {
    margin-top: 10px;
    max-width: 500px;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .casemib-hero,
    .casemib-situatie,
    .casemib-web-kop,
    .casemib-meten {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .casemib-hero-foto {
        height: 300px;
    }

    .casemib-stap-kaarten,
    .casemib-web-kaarten {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .casemib-stap-kaarten,
    .casemib-web-kaarten {
        grid-template-columns: 1fr;
    }

    /* Mobiele spec m2e: logo, "Wat er nu draait", browsermock, intro + sitelink
       en de fotorij vervallen. Het CTA-eindblok blijft wel staan (6-8-2026): de
       onderbalk komt pas na scrollen in beeld en de pagina eindigde zonder CTA. */
    .casemib-logo,
    .casemib-draait,
    .casemib-web-kop .browsermock,
    .casemib-web-intro,
    .casemib-web-link,
    .casemib-fotorij,
    .casemib-hero-foto {
        display: none;
    }

    /* Resultaten onder elkaar: gecentreerd leest rustiger dan links uitgelijnd
       nu de foto ernaast weg is (besluit 6-8-2026). */
    .casemib-hero .cijfer-rij {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .casemib-controle {
        padding: 24px 20px;
    }
}


/* ----- fragment: 2f-rekentool.css ----- */
/* ===== 2f /rekentool: paginaspecifieke classes (prefix reken-) ===== */

/* Lang/kort-copy: desktop toont de lange variant, mobiel de korte */
.reken-kort { display: none; }

/* --- Hero --- */
.reken-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    margin-top: 28px;
}

.reken-intro {
    margin-top: 18px;
    max-width: 520px;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink-70);
}

.reken-micro {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--ink-50);
}

.paneel-geel.reken-totaalpaneel {
    border: 1px solid rgba(32, 32, 32, 0.15);
    padding: 32px;
}

.paneel-geel.reken-totaalpaneel .cijfer-getal.reken-totaal {
    font-size: clamp(2.4rem, 4.6vw, 3.5rem);
    margin-top: 6px;
}

/* Totaal pas tonen als de bezoeker zelf een schuif heeft verzet (body.reken-actief
   wordt door rekentool.js gezet). Daarvoor staat er een uitnodiging in het paneel. */
.reken-totaal,
.reken-totaal-uitleg,
.reken-onderbalk-bedrag {
    display: none;
}

.reken-totaal-prompt {
    margin-top: 10px;
    font-size: 1.05rem;
    line-height: 1.5;
}

body.reken-actief .reken-totaal,
body.reken-actief .reken-totaal-uitleg,
body.reken-actief .reken-onderbalk-bedrag {
    display: block;
}

body.reken-actief .reken-totaal-prompt,
body.reken-actief .reken-onderbalk-prompt {
    display: none;
}

/* --- Sommen --- */
.reken-som-kop {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reken-som-nr {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--geel);
    color: var(--ink);
    border-radius: 9px;
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.06rem;
}

.reken-som-kop h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.reken-som-intro {
    margin-top: 14px;
    max-width: 700px;
    color: var(--ink-70);
}

.reken-intro-link {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ink);
}

.reken-som-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
    margin-top: 30px;
}

/* Schuivenkaart: wit met rand op wit, vlak (zonder rand) op lichtgrijs */
.reken-schuifkaart {
    background: var(--surface);
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-blok);
    padding: 30px;
    display: grid;
    gap: 22px;
}

.reken-schuifkaart .eyebrow {
    margin-bottom: 0;
}

.reken-schuifkaart--vlak {
    border: none;
}

/* --- Sliders --- */
.reken-slider-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.reken-slider-kop label {
    font-weight: 700;
    font-size: 0.98rem;
}

.reken-slider-waarde {
    font-family: var(--font-kop);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--ink);
    white-space: nowrap;
}

.reken-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 28px;
    margin: 8px 0 4px;
    background: transparent;
    cursor: pointer;
}

.reken-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rand-koel-2);
}

.reken-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--geel);
    border: 2px solid var(--ink);
}

.reken-slider input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rand-koel-2);
}

.reken-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--geel);
    border: 2px solid var(--ink);
}

.reken-slider input[type="range"]:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.reken-slider-minmax {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ink-50);
}

/* --- Zijkolom: resultaatpaneel + CTA-kaartje --- */
.reken-zijkolom {
    display: grid;
    gap: 18px;
    align-content: start;
}

.reken-ctakaart {
    background: var(--grijs-koel);
    border-radius: 14px;
    padding: 22px;
    display: grid;
    gap: 14px;
}

.reken-ctakaart--wit {
    background: var(--surface);
}

.reken-ctakaart p {
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.55;
}

.reken-ctakaart .btn {
    display: block;
    width: 100%;
    text-align: center;
}

/* Uitklapbaar mailformulier */
.reken-mail summary {
    cursor: pointer;
    list-style: none;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink-70);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reken-mail summary::-webkit-details-marker {
    display: none;
}

.reken-mail[open] summary {
    margin-bottom: 14px;
}

/* --- Duiding --- */
.reken-duiding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.reken-duiding-tekst {
    margin-top: 16px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ink-70);
}

.reken-model-kaarten {
    display: grid;
    gap: 14px;
}

.reken-model-kaarten h3 {
    font-family: var(--font-kop);
    font-size: 1.12rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.reken-model-kaarten p {
    font-size: 0.92rem;
    color: var(--ink-70);
    line-height: 1.55;
}

/* --- Slot-CTA (wit; geen hairline nodig, de duidingsectie erboven is grijs) --- */

/* Eén kolom, net als de eind-CTA op de homepage: knoppentrio past op één regel */
.reken-slot-inner .kop-sectie {
    max-width: 24ch;
}

.reken-slot-tekst {
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 52ch;
}

.reken-slot-foto img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: top;
    border-radius: 16px;
}

/* --- Vaste mobiele onderbalk (alleen < 768px zichtbaar) --- */
.reken-onderbalk {
    display: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .reken-hero-grid,
    .reken-som-grid,
    .reken-duiding-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    /* Mobiel (m2f): compactere koppen, korte copy, geen zijkaarten.
       Het slotblok blijft wel staan (6-8-2026): de onderbalk komt pas na
       scrollen in beeld en de pagina eindigde zonder CTA. */
    .reken-lang { display: none; }
    .reken-kort { display: inline; }

    .reken-hero-paneel,
    .reken-micro,
    .reken-som-intro,
    .reken-slider-minmax,
    .reken-ctakaart,
    .reken-duiding-eyebrow,
    .reken-model-kaarten {
        display: none;
    }

    .reken-som-kop h2 {
        font-size: 1.5rem;
    }

    .reken-schuifkaart {
        padding: 22px;
        gap: 18px;
    }

    .reken-slider-waarde {
        font-size: 1.15rem;
    }

    /* Onderbalk: totaal blijft in beeld tijdens het slepen */
    .reken-onderbalk {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--ink);
    }

    .reken-onderbalk-totaal {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
    }

    .reken-onderbalk-label {
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #8A9099;
    }

    .reken-onderbalk-bedrag {
        font-family: var(--font-kop);
        font-weight: 800;
        font-size: 1.35rem;
        color: var(--geel);
    }

    .reken-onderbalk-prompt {
        font-size: 0.85rem;
        color: #C9CDD3;
        text-align: right;
    }

    .reken-onderbalk .btn {
        display: block;
        width: 100%;
        text-align: center;
        min-height: 48px;
    }

    /* Ruimte voor de vaste onderbalk in de footer, niet op de body: anders
       blijft er een witte strook onder de footer staan. */
    .p-rekentool .footer {
        padding-bottom: calc(156px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 600px) {
    .reken-hero-grid {
        margin-top: 20px;
    }

    .paneel-geel.reken-totaalpaneel {
        padding: 24px;
    }
}


/* ----- fragment: 2g.css ----- */
/* ===== 2g /over-ons - paginaspecifieke classes (prefix overons-) ===== */

.overons-hero-band {
    padding-top: 20px;
}

.overons-kruimelpad {
    margin-bottom: 26px;
}

.overons-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.overons-hero-body {
    margin-top: 18px;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 520px;
}

.overons-foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-blok);
}

.overons-tweekolom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.overons-tweekolom--foto {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
}

.overons-tekst h2 {
    margin-bottom: 18px;
}

.overons-tekst p {
    color: var(--ink-70);
    line-height: 1.7;
}

.overons-tekst p + p {
    margin-top: 16px;
}

.overons-afweging {
    background: var(--grijs-koel);
    border-radius: var(--radius-blok);
    padding: 34px;
}

.overons-afweging h3 {
    font-family: var(--font-kop);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 8px 0 12px;
}

.overons-afweging p {
    color: var(--ink-70);
    line-height: 1.7;
}

.overons-afweging-link {
    display: inline-block;
    margin-top: 16px;
    font-weight: 900;
    font-size: 0.94rem;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Bruggetje tussen de tekst en de contactknoppen */
.overons-tekst .overons-contact-aanzet {
    margin-top: 20px;
    font-weight: 700;
    color: var(--ink);
}

.overons-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

/* Eind-CTA op wit, zelfde maatvoering als de eind-CTA op de homepage */
.overons-cta .kop-sectie {
    max-width: 24ch;
}

.overons-cta-body {
    margin-top: 14px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 52ch;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .overons-hero,
    .overons-tweekolom,
    .overons-tweekolom--foto {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    /* m2g: ingekorte herozin en afwegingkaart vervallen */
    .overons-alleen-desktop {
        display: none;
    }

    .overons-afweging {
        display: none;
    }

}


/* ----- fragment: 2h.css ----- */
/* ============================================================
   2h /contact - paginaspecifieke classes (prefix contact-)
   ============================================================ */

/* --- Hero + routetegels --- */
.contact-hero-kop {
    max-width: 640px;
    margin: 24px 0 36px;
}

.contact-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.contact-route {
    background: #fff;
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-blok);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-route--geel {
    background: var(--geel);
    border-color: var(--geel);
}

.contact-route-label {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
}

.contact-route--geel .contact-route-label {
    color: rgba(32, 32, 32, 0.65);
}

.contact-route-titel {
    font-family: var(--font-kop);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.contact-route p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
}

.contact-route--geel p {
    color: #3A3A3A; /* op-geel secundair, expliciet uit de spec */
}

.contact-route-acties {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    gap: 10px;
}

.contact-route-acties--duo .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
}

/* Outline-knoppen op de witte tegels: iets zachtere rand dan op grijs */
.contact-route .btn-outline {
    border-color: var(--rand-koel-2);
}

/* --- Hoofdsectie: agenda + bericht --- */
/* Rij 1: bericht links (breed), contactgegevens rechts (smal).
   Twee rasterrijen: de kop staat alleen in de linkerkolom, en het formulier en
   het grijze blok staan samen in rij 2. Zo begint en eindigt het grijze blok
   precies gelijk met de witte formulierkaart, en niet met de kop erboven. */
.contact-berichtgrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 40px;
    row-gap: 0;
    align-items: stretch;
}

.contact-bericht-kop {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 20px;
}

.contact-berichtgrid .contact-formkaart {
    grid-column: 1;
    grid-row: 2;
}

.contact-berichtgrid .contact-gegevens {
    grid-column: 2;
    grid-row: 2;
}

.contact-agenda-intro {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 520px;
    margin: 12px 0 24px;
}

/* Geen eigen rand of padding: het boekingswidget heeft binnenin al een kader. */
.contact-agendakaart {
    border: 0;
    padding: 0;
}

/* Geen eigen rand: het formulier eronder is zelf al een omkaderde kaart.
   Wel dezelfde randkleur en ronding als de andere kaarten op deze pagina
   (brochureblok en het boekingswidget), zodat het een set blijft. */
.contact-formkaart .standaard-form {
    max-width: none;
    border-color: var(--rand-koel);
    border-radius: var(--radius-blok);
}

.contact-form-kop {
    font-family: var(--font-kop);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.contact-form-sub {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 6px 0 20px;
}

.contact-form-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.contact-formkaart .form-submit .btn {
    width: 100%;
    justify-content: center;
}

.contact-gegevens {
    background: var(--grijs-koel);
    border-radius: var(--radius-blok);
    padding: 26px;
}

.contact-gegevens-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.contact-gegeven-kop {
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 4px;
}

.contact-gegeven,
.contact-gegeven span,
.contact-gegeven a {
    font-size: 0.95rem;
    color: var(--ink);
}

.contact-gegeven a {
    font-weight: 700;
    text-decoration: none;
}

.contact-gegeven a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-gegevens-kvk {
    border-top: 1px solid var(--rand-koel-2);
    margin-top: 20px;
    padding-top: 14px;
    font-size: 0.85rem;
    color: var(--ink-50);
}

/* --- Doorverwijssectie --- */
.contact-doorverwijs-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

.contact-doorverwijs-kop {
    font-family: var(--font-kop);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.contact-doorverwijs-grid p {
    color: var(--ink-70);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}

.contact-doorverwijs-knoppen {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Toon/verberg-hulpen (mobiel vs desktop copy) --- */
.contact-alleen-mobiel {
    display: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .contact-berichtgrid {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .contact-bericht-kop,
    .contact-berichtgrid .contact-formkaart,
    .contact-berichtgrid .contact-gegevens {
        grid-column: 1;
        grid-row: auto;
        /* Zonder min-width 0 rekt de kolom op tot de breedste vaste inhoud
           (de Turnstile-widget) en schuift de hele pagina horizontaal. */
        min-width: 0;
    }

    .contact-bericht-kop {
        margin-bottom: 0;
    }

    .contact-doorverwijs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-doorverwijs-knoppen {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .p-contact .kruimelpad {
        display: none;
    }

    .contact-hero-kop {
        margin-top: 0;
    }

    .contact-routes {
        grid-template-columns: 1fr;
    }

    .contact-route-acties .btn {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    /* Ingekorte mobiele copy */
    .contact-desktop-rest,
    .contact-desktop-only {
        display: none;
    }

    .contact-alleen-mobiel {
        display: inline;
    }

    /* Agenda op mobiel: alleen de kop, eyebrow en intro vervallen */
    .contact-agenda .eyebrow,
    .contact-agenda-intro {
        display: none;
    }

    /* Formulier: bedrijfsnaam vervalt, rijen onder elkaar */
    .contact-form-duo {
        grid-template-columns: 1fr;
    }

    .contact-veld-bedrijf {
        display: none;
    }

    /* Contactgegevens ingedikt: WhatsApp- en KvK-regel vervallen */
    .contact-gegevens-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .contact-gegeven--wa,
    .contact-gegevens-kvk {
        display: none;
    }

    /* Doorverwijssectie vervalt op mobiel */
    .contact-doorverwijs {
        display: none;
    }
}

@media (max-width: 600px) {
    .contact-route {
        padding: 24px;
    }

    .contact-formkaart {
        padding: 22px;
    }

    .contact-agendakaart {
        padding: 10px;
    }

    .contact-gegevens {
        padding: 22px;
    }
}


/* ============================================================
   EINDREVIEW-CORRECTIES totaal-redesign (5-8-2026)
   Bewust als laatste blok: deze regels overrulen de fragmenten.
   ============================================================ */

/* wjk-hero-wrap staat los van .artikel zodat .artikel h1 de kop-groot
   niet meer verkleint; padding gelijk aan .artikel. */
.wjk-hero-wrap {
    background: var(--grijs-koel);
    padding: 24px 0 56px;
}

@media (min-width: 768px) {
    .wjk-hero-wrap {
        padding: 24px 0 80px;
    }
}

/* Reviewkaarten: lange teksten visueel begrenzen (data blijft volledig).
   Kaarten zijn sitewide even hoog (stretch); de kaart is zelf een flexkolom
   met flex-grow op de tekst, dus naam en datum plakken onderaan. */
.reviews-grid {
    align-items: stretch;
}

.review-card-tekst {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Veeg-hint bij de tijdlijn: alleen op mobiel zichtbaar */
.rail-hint {
    display: none;
}

/* Onderbalk-CTA: op /contact "Kies een moment" */
.mbb-tekst-contact {
    display: none;
}

body.p-contact .mbb-tekst-standaard {
    display: none;
}

body.p-contact .mbb-tekst-contact {
    display: inline;
}

@media (max-width: 1024px) {
    /* Meeloop-telefoon op wat-je-krijgt: inline tonen in plaats van verbergen */
    .momenten-telefoon {
        display: block;
        max-width: 340px;
    }
}

@media (max-width: 768px) {
    /* Leadvangst "Mail mij deze berekening" blijft op mobiel beschikbaar;
       alleen kaartopmaak, lopende tekst en dubbele gesprek-knop verdwijnen
       (de vaste onderbalk draagt de gesprek-CTA al). */
    .reken-ctakaart {
        display: block;
        padding: 0;
        background: none;
        border: none;
    }

    .reken-ctakaart > p,
    .reken-ctakaart > .btn {
        display: none;
    }
}

@media (max-width: 600px) {
    .rail-hint {
        display: block;
        margin-top: 6px;
        font-size: 0.78rem;
        color: var(--ink-50);
    }

    .hhw-rail {
        scroll-snap-type: x mandatory;
    }

    .hhw-rail [role="tab"] {
        scroll-snap-align: start;
    }

    /* Lus als uitklaplijst: elk paneel direct onder zijn eigen schakel */
    .lus,
    .lus-panelen {
        display: contents;
    }

    .hhw-systeem-grid {
        display: grid;
        gap: 10px;
    }

    .lus-node:nth-of-type(1) { order: 1; }
    #schakelpaneel-1 { order: 2; }
    .lus-node:nth-of-type(2) { order: 3; }
    #schakelpaneel-2 { order: 4; }
    .lus-node:nth-of-type(3) { order: 5; }
    #schakelpaneel-3 { order: 6; }
    .lus-node:nth-of-type(4) { order: 7; }
    #schakelpaneel-4 { order: 8; }
    .lus-node:nth-of-type(5) { order: 9; }
    #schakelpaneel-5 { order: 10; }
    .lus-node:nth-of-type(6) { order: 11; }
    #schakelpaneel-6 { order: 12; }
}


/* ============================================================
   FEEDBACKRONDE HOME (5-8-2026)
   Laatste blok: overrulet de fragmenten hierboven.
   ============================================================ */

/* 1. Hero met achtergrondfoto: vertrouwenspunten in het wit eronder,
   zonder onderrand (de sectie erna is ook wit). */
.band-vertrouwen--home {
    border-bottom: 0;
}

/* 2. Doorverwijzing onder de herkenbaar-kaarten */
.home-sectie-link {
    margin-top: 26px;
}

/* 3. Momentkaarten even hoog: de donkere voetbalk plakt onderaan de kaart,
   zodat kaart 2 en 3 geen witruimte onder de balk houden. */
.home-kaarten3 .momentkaart {
    display: flex;
    flex-direction: column;
}

.home-kaarten3 .momentkaart-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* "Zo werkt dat" staat in alle drie de kaarten op dezelfde hoogte */
.home-kaarten3 .home-regelt-link {
    margin-top: auto;
    padding-top: 16px;
    align-self: flex-start;
}

/* Voetbalk altijd twee regels (cijfer boven, tekst eronder), anders wordt de
   balk van kaart 3 lager dan die van 1 en 2 en ontstaat er witruimte boven. */
.home-kaarten3 .momentkaart-voet {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* 4. Dit levert het op: zelfde kaartformaat als het herkenbaar-blok
   (geen gele streep boven de kolommen meer). */
.home-kaarten4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.home-opbrengst .cijfer-getal {
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
}

.home-opbrengst p {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-70);
}

.home-stats-micro {
    display: block;
    margin-top: 12px;
    max-width: 52ch;
}

/* 5. Echte screenshot in de browsermock i.p.v. de placeholder */
.browsermock-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 1024px) {
    .home-kaarten4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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


/* ============================================================
   FEEDBACKRONDE HOE HET WERKT (5-8-2026)
   ============================================================ */

/* Demo-blok: "Liever live?" is nu een CTA naar de planner */
.demo-kop-micro-link {
    font-weight: 700;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.demo-kop-micro-link:hover {
    color: var(--geel-strong);
}

/* FAQ gecentreerd: kop boven, vragenlijst eronder */
.hhw-faq-midden {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.hhw-faq-midden .faq-list {
    margin-top: 28px;
    text-align: left;
}

/* Meer lucht tussen de demoknop en de regel eronder */
.demo-kop-micro {
    margin-top: 18px;
}

/* Eind-CTA is wit, net als de sectie erboven: een hairline houdt ze uit elkaar */
.sectie--rand-boven {
    border-top: 1px solid var(--ink-10);
}


/* ============================================================
   FEEDBACKRONDE HOE HET WERKT, ronde 2 (5-8-2026)
   ============================================================ */

/* De vijf momenten liggen in dezelfde rastercel: de sectie is altijd zo hoog
   als het langste moment, dus er verspringt niets als je doorklikt. Panelen
   die niet actief zijn blijven overeind maar zijn onzichtbaar (visibility,
   dus ook weg voor schermlezers en buiten de tabvolgorde). */
.hhw-stapdetail-sectie > .container {
    display: grid;
}

.hhw-stapdetail {
    grid-area: 1 / 1;
    align-items: stretch;
}

/* !important is nodig: de UA-stijl voor [hidden] is zelf !important, en zonder
   dit blijft alleen het actieve moment in de layout staan (dan verspringt de
   hoogte alsnog per stap). visibility houdt het weg voor muis, toetsenbord
   en schermlezers. */
.hhw-stapdetail[hidden] {
    display: grid !important;
    visibility: hidden;
    pointer-events: none;
}

/* Knoppenrij altijd op dezelfde hoogte, ongeacht de lengte van de tekst */
.hhw-stapdetail > div:first-child {
    display: flex;
    flex-direction: column;
}

.hhw-stapdetail .stap-nav {
    margin-top: auto;
    padding-top: 32px;
}

/* Vaste telefoon: even groot bij elk moment, inhoud bovenaan.
   Let op: geen align-self op de sticky variant, die moet juist de volle
   hoogte van zijn rastercel als plakbereik houden. */
.hhw-stapdetail .telefoonmock {
    align-self: start;
}

.hhw-stapdetail .telefoonmock,
.telefoonmock--sticky {
    height: 620px;
}

.hhw-stapdetail .telefoonmock-scherm,
.telefoonmock--sticky .telefoonmock-scherm {
    height: 100%;
}

.hhw-stapdetail .telefoonmock-chat,
.telefoonmock--sticky .telefoonmock-chat {
    flex: 1 1 auto;
    overflow: hidden;
}

/* Controlekaarten: koppen mogen twee regels worden, de bodyteksten beginnen
   daardoor bij alle drie op dezelfde hoogte */
.controle-grijs-kaart h3 {
    min-height: 2.5em;
}

@media (max-width: 1024px) {
    /* Enkele kolom: telefoon onder de tekst, zelfde vaste maat */
    .hhw-stapdetail .telefoonmock,
    .telefoonmock--sticky {
        justify-self: start;
    }

    .controle-grijs-kaart h3 {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .hhw-stapdetail .telefoonmock,
    .telefoonmock--sticky {
        height: 560px;
        width: 100%;
    }
}

/* Herofoto: vaste verhouding, zelfde afronding als de placeholder die hier stond */
.hhw-hero-foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Meelopende telefoon op /wat-je-krijgt: vijf gesprekken in dezelfde telefoon,
   het paneel van het moment dat in beeld staat is zichtbaar (zie interacties.js). */
.wjk-tm-paneel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.wjk-tm-paneel .telefoonmock-chat {
    flex: 1 1 auto;
    overflow: hidden;
}

/* De telefoonkolom moet de volle hoogte van de momentenrij krijgen, anders
   heeft position: sticky geen bereik en scrollt de telefoon gewoon mee weg.
   (.momenten-grid staat op align-items: start voor de kaartenkolom.) */
.momenten-telefoon {
    align-self: stretch;
}

/* ============================================================
   FEEDBACKRONDE WAT JE KRIJGT (5-8-2026)
   ============================================================ */

/* Vertrouwensband als grijze scheiding onder de hero */
.band-vertrouwen--grijs {
    background: var(--grijs-koel);
    border-color: transparent;
}

/* Werkt met wat je al hebt: alles gecentreerd, kop boven, dan tekst, dan labels */
.wjk-werktmet-kop {
    display: block;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 28px;
}

.wjk-werktmet-kop .kop-sectie {
    max-width: none;
}

.wjk-werktmet-kop .sectie-intro {
    margin-top: 14px;
}

.wjk-werktmet .pill-rij {
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Zelf zien: tekst links, knoppen rechts, verticaal gecentreerd */
.wjk-zelfzien {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

.wjk-zelfzien-body {
    margin-top: 14px;
    max-width: 62ch;
    color: var(--ink-70);
    line-height: 1.65;
}

/* Eind-CTA: enkele kolom, zelfde opzet als home en hoe-het-werkt */
.wjk-cta-kolom {
    max-width: 660px;
}

@media (max-width: 860px) {
    .wjk-zelfzien {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Hero /wat-je-krijgt: zelfde skelet als /hoe-het-werkt, tekst links met
   knoppen, beeld rechts, verticaal gecentreerd. */
.wjk-hero {
    align-items: center;
}

.wjk-hero .cta-band-knoppen {
    margin-top: 26px;
}

.wjk-hero-foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Sectie "Nu drie partijen. Straks een.": alles gecentreerd. Kop en intro,
   daaronder de drie huidige partijen als grijze kaarten, dan het label en de
   labels van waar het mee samenwerkt. */
.wjk-nu-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 980px;
    margin: 0 auto 44px;
}

.wjk-nu-kaart {
    background: var(--grijs-koel);
    border-radius: 14px;
    padding: 20px 22px;
    text-align: left;
}

.wjk-nu-kaart .eyebrow {
    margin-bottom: 8px;
}

.wjk-nu-kaart p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-70);
}

.wjk-werktmet-label {
    display: block;
    text-align: center;
    margin-bottom: 18px;
}

@media (max-width: 768px) {
    .wjk-nu-kaarten {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   FEEDBACKRONDE CONTACT (5-8-2026)
   ============================================================ */

/* Rij 2: de agenda onder het berichtblok, alles in een gecentreerde kolom:
   kop, intro, dan de agenda, dan de drie geruststellingen. Geen grid, want
   twee kolommen knijpen het boekingswidget op mobiel onleesbaar smal. */
.contact-agendarij {
    max-width: 720px;
    margin: 56px auto 0;
    padding-top: 48px;
    border-top: 1px solid var(--rand-koel);
    text-align: center;
}

.contact-agenda-kop {
    max-width: 560px;
    margin: 0 auto 28px;
}

.contact-agendarij .contact-agenda-intro {
    margin: 12px auto 0;
}


/* De kalender compact houden: bij een bredere kolom rekken de cellen mee en
   wordt het rooster onnodig luchtig. */
.contact-agendarij .contact-agendakaart {
    max-width: 560px;
    margin: 0 auto;
}

/* Contactgegevens staan naast het formulier: twee kolommen wordt te krap */
.contact-berichtgrid .contact-gegevens-grid {
    grid-template-columns: 1fr;
}

/* Brochureblok: nette gecentreerde kaart met uitgelijnde velden */
.contact-brochure .brochure-blok {
    max-width: 680px;
    margin: 0 auto;
    border: 1px solid var(--rand-koel);
    border-radius: var(--radius-blok);
    padding: 34px;
    text-align: center;
}

.contact-brochure .brochure-blok > p {
    margin-left: auto;
    margin-right: auto;
}

/* .standaard-form is zelf al een omkaderde kaart; binnen het brochureblok
   zou dat een tweede rand geven. */
.contact-brochure .brochure-form {
    max-width: none;
    background: none;
    border: 0;
    padding: 0;
    text-align: center;
}

.contact-brochure .brochure-velden {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
    text-align: left;
}

.contact-brochure .brochure-velden .form-submit {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.contact-brochure .brochure-velden .form-submit .btn {
    width: 100%;
}

.contact-brochure .form-footer {
    margin-top: 16px;
}

@media (max-width: 700px) {
    .contact-brochure .brochure-blok {
        padding: 24px 20px;
    }

    .contact-brochure .brochure-velden {
        grid-template-columns: 1fr;
    }
}