/* =============================================================================
   SKYLINE AFBOUW — HOOFDSTYLESHEET
   -----------------------------------------------------------------------------
   1.  Design tokens (kleuren, ruimte, typografie)
   2.  Basis & typografie
   3.  Layout-helpers
   4.  Knoppen & badges
   5.  Header / navigatie / megamenu
   6.  Hero
   7.  Logobalk
   8.  USP-blokken
   9.  Diensten
   10. Calculator
   11. Portfolio + lightbox
   12. Cases & tellers
   13. Kwaliteit / afwerkingsklassen
   14. Werkwijze-tijdlijn
   15. Reviews
   16. Werkgebied
   17. FAQ
   18. Vacatures
   19. Contact
   20. CTA-banner
   21. Footer
   22. Modals & formulieren
   23. Chat
   24. Cookies
   25. Zwevende knoppen
   26. Responsive
   ============================================================================= */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    --header-height: 74px;

    /* Kleur — licht */
    --bg-primary:   #ffffff;
    --bg-secondary: #e9f0fb;
    --bg-tertiary:  #dbe6f7;
    --bg-elevated:  #ffffff;

    --text-primary:   #10131a;
    --text-secondary: #545b6b;
    --text-muted:     #7b8397;

    --accent:        #1a56db;
    --accent-hover:  #1243b3;
    --accent-soft:   rgba(26, 86, 219, 0.08);
    --accent-softer: rgba(26, 86, 219, 0.04);
    --accent-glow:   rgba(26, 86, 219, 0.16);
    --accent-line:   rgba(26, 86, 219, 0.22);
    --sectie-lijn:   rgba(26, 86, 219, 0.42);   /* de schuine streep tussen de secties */

    --blue-blob-1: #1a56db;
    --blue-blob-2: #2563eb;
    --blue-blob-3: #3b82f6;

    --success: #0f9d6e;
    --warning: #d97706;
    --danger:  #dc2626;

    --card-bg:      #ffffff;
    --card-border:  #d6e0f0;
    --border-color: #d6e0f0;
    --border-soft:  rgba(16, 19, 26, 0.06);

    --nav-bg:      rgba(255, 255, 255, 0.86);
    --glass-bg:    rgba(255, 255, 255, 0.72);
    --overlay-bg:  rgba(9, 14, 28, 0.62);

    --popup-bg:      rgba(255, 255, 255, 0.97);
    --popup-border:  rgba(26, 86, 219, 0.15);
    --popup-tag-bg:  #ffffff;
    --avatar-bg:     #eef2f8;
    --chat-body-bg:  linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,255,.98));

    --shadow-xs: 0 1px 2px rgba(16, 24, 45, .05);
    --shadow-sm: 0 2px 10px rgba(16, 24, 45, .07);
    --shadow-md: 0 10px 34px rgba(16, 24, 45, .10);
    --shadow-lg: 0 24px 60px rgba(16, 24, 45, .14);
    --shadow-xl: 0 40px 90px rgba(16, 24, 45, .18);
    --shadow-accent: 0 6px 18px rgba(26, 86, 219, .18);

    /* Ruimte */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
    --space-9: 96px;  --space-10: 128px;
    --section-y: clamp(52px, 5.5vw, 78px);

    /* Radii */
    --radius-xs: 8px;  --radius-sm: 12px; --radius-md: 18px;
    --radius-lg: 26px; --radius-xl: 34px; --radius-full: 10px;

    /* Typografie */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --fs-display: clamp(2rem, 3.9vw, 3rem);
    --fs-h2:      clamp(1.55rem, 2.5vw, 2.05rem);
    --fs-h3:      clamp(1.1rem, 1.5vw, 1.32rem);
    --fs-lead:    clamp(.96rem, 1.05vw, 1.05rem);

    /* Beweging */
    --ease:        cubic-bezier(.4, 0, .2, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --transition:  .3s var(--ease);

    /* De schuine randen tussen de secties.
       -------------------------------------------------------------------
       De rand is een band die over de volle schermbreedte wordt gekanteld.
       Door die kanteling zakt de linkerkant net zo veel omlaag als de
       rechterkant omhoog komt: dat is een halve schermbreedte maal de
       tangens van de hoek. Bij 2,2 graden is dat 0,0384 per pixel breedte,
       dus over het hele scherm 3,84vw.

       Is de band lager dan die 3,84vw, dan komt hij aan de uiteinden tekort
       en zie je daar de rechte onderrand van de sectie doorschemeren — precies
       wat er eerder misging. Daarom: 3,9vw plus een marge van 36px.

       Verander je --sky-hoek? Pas dan --sky-rand mee aan:
           1,0 graad → 1,75vw     2,5 graden → 4,4vw
           1,5 graad → 2,62vw     3,0 graden → 5,3vw
           2,2 graden → 3,9vw     4,0 graden → 7,0vw
    */
    --sky-hoek:    -2.2deg;
    --sky-rand:    calc(3.9vw + 36px);
    --skew-angle:  var(--sky-hoek);   /* oude naam, blijft werken */

    --blob-speed:  1;
}

/* --------------------------------------------------------------------------
   DONKERE WEERGAVE
   --------------------------------------------------------------------------
   De ondergrond is bewust neutraal grijs met een heel lichte warme inslag, niet
   blauw. Blauw op blauw leest snel als een schermpje uit een film; met een
   neutrale ondergrond blijft het accentblauw juist accent, en dat is precies
   waar het voor bedoeld is. Alle vlakken zijn onderling een stap uit elkaar
   gehouden, zodat kaarten, invoervelden en de achtergrond ook zonder felle
   randen van elkaar te onderscheiden zijn.
   -------------------------------------------------------------------------- */
.dark-theme {
    --bg-primary:   #14151a;
    --bg-secondary: #1a1c22;
    --bg-tertiary:  #212329;
    --bg-elevated:  #1e2026;

    --text-primary:   #ecedf0;
    --text-secondary: #a6a9b2;
    --text-muted:     #7f838d;

    /* Iets zachter dan overdag: fel blauw op een donkere ondergrond schittert. */
    --accent:        #6d9bf5;
    --accent-hover:  #86aefb;
    --accent-soft:   rgba(109, 155, 245, .12);
    --accent-softer: rgba(109, 155, 245, .06);
    --accent-glow:   rgba(109, 155, 245, .16);
    --accent-line:   rgba(255, 255, 255, .13);
    --sectie-lijn:   rgba(255, 255, 255, .10);

    --blue-blob-1: #3f6fd0;
    --blue-blob-2: #4d7fe0;
    --blue-blob-3: #6d9bf5;

    --success: #4ec99a;
    --warning: #e0ae56;
    --danger:  #e8807c;

    --card-bg:      #1e2026;
    --card-border:  #2c2f36;
    --border-color: #2c2f36;
    --border-soft:  rgba(255, 255, 255, .06);

    --nav-bg:     rgba(20, 21, 26, .88);
    --glass-bg:   rgba(30, 32, 38, .74);
    --overlay-bg: rgba(8, 9, 12, .76);

    --popup-bg:     rgba(30, 32, 38, .98);
    --popup-border: rgba(255, 255, 255, .12);
    --popup-tag-bg: #24262c;
    --avatar-bg:    #292c33;
    --chat-body-bg: linear-gradient(180deg, rgba(26,28,34,.98), rgba(31,33,40,.98));

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .34);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .40);
    --shadow-md: 0 10px 34px rgba(0, 0, 0, .48);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .56);
    --shadow-xl: 0 40px 90px rgba(0, 0, 0, .62);
    --shadow-accent: 0 6px 18px rgba(109, 155, 245, .18);
}

/* ==========================================================================
   2. BASIS
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.68;
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow-x: hidden;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
    transition: background-color .4s var(--ease), color .4s var(--ease);
}

body.nav-open, body.modal-open { overflow: hidden; }

/* Technisch rasterpatroon op de achtergrond — het "bouwtekening"-gevoel */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(var(--accent-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-line) 1px, transparent 1px),
        linear-gradient(var(--accent-line) 2px, transparent 2px),
        linear-gradient(90deg, var(--accent-line) 2px, transparent 2px);
    background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
    opacity: .5;
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

img { max-width: 100%; display: block; }
a  { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 99px; border: 3px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

.skip-link {
    position: absolute; top: -80px; left: 16px; z-index: 20000;
    background: var(--accent); color: #fff; padding: 12px 22px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600;
    text-decoration: none; transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
    width: min(92%, 1280px);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}
.container-narrow { width: min(92%, 960px); margin-inline: auto; position: relative; z-index: 2; }

section { position: relative; }

/* De ruimte boven en onder de inhoud van een sectie.
   Boven op de gewone ruimte komt de helft van de schuine rand erbij: die rand
   loopt aan één kant immers omhoog en aan de andere kant omlaag, en zonder die
   extra lucht komt de bovenste kaart aan de lage kant vlak tegen de diagonaal
   aan te staan. */
.section-pad { padding-block: calc(var(--section-y) + var(--sky-rand) / 2); }

/* Grijze secties met de schuine randen die het thema kenmerken */
.tilted {
    background: var(--bg-secondary);
    position: relative;
}
.tilted::before,
.tilted::after {
    content: '';
    position: absolute; left: 0; width: 100%;
    height: var(--sky-rand);
    background: inherit; z-index: 0; pointer-events: none;
    transform: skewY(var(--sky-hoek));
}
/* De band ligt precies met zijn hart op de sectierand: de helft steekt naar
   buiten, de andere helft valt over de sectie zelf. Omdat de band ruimer is
   dan de kanteling verlangt (zie --sky-rand), loopt de schuine lijn van de
   ene schermrand tot de andere door, zonder trapje aan de uiteinden. */
.tilted::before { top:    calc(var(--sky-rand) / -2); }
.tilted::after  { bottom: calc(var(--sky-rand) / -2); }
.tilted > * { position: relative; z-index: 2; }

.section-head { text-align: center; max-width: 660px; margin: 0 auto var(--space-6); }
.section-head.left { text-align: left; margin-inline: 0; }

.section-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--accent); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px;
}
.section-kicker::before {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent));
}
.section-kicker::after {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}
.section-head.left .section-kicker::before { display: none; }

.section-title {
    font-size: var(--fs-h2); font-weight: 800; line-height: 1.14;
    letter-spacing: -.028em; margin-bottom: 16px; color: var(--text-primary);
    text-wrap: balance;
}
.section-sub {
    color: var(--text-secondary); font-size: var(--fs-lead);
    max-width: 560px; margin-inline: auto; text-wrap: pretty;
}
.section-head.left .section-sub { margin-inline: 0; }

.highlight { color: var(--accent); }

/* ==========================================================================
   4. KNOPPEN & BADGES
   ========================================================================== */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 25px; border-radius: var(--radius-full);
    font-weight: 650; font-size: .98rem; letter-spacing: -.01em;
    text-decoration: none; cursor: pointer; border: none;
    transition: transform .28s var(--ease-spring), box-shadow .3s var(--ease),
                background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
    isolation: isolate; white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--accent); color: #fff !important; box-shadow: var(--shadow-accent); }
.btn-primary::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, var(--accent-hover), var(--blue-blob-3));
    opacity: 0; transition: opacity .3s var(--ease);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px var(--accent-glow); }
.btn-primary:hover::after { opacity: 1; }

.btn-secondary {
    background: transparent; color: var(--text-primary) !important;
    border: 2px solid var(--border-color);
}
.btn-secondary:hover {
    border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent) !important; transform: translateY(-3px);
}

.btn-ghost { background: var(--accent-soft); color: var(--accent) !important; }
.btn-ghost:hover { background: var(--accent); color: #fff !important; transform: translateY(-3px); }

.btn-light { background: #fff; color: #0d2147 !important; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(0,0,0,.3); }

.btn-outline-light {
    background: rgba(255,255,255,.06); color: #fff !important;
    border: 2px solid rgba(255,255,255,.35); backdrop-filter: blur(8px);
}
.btn-outline-light:hover { background: rgba(255,255,255,.15); border-color: #fff; transform: translateY(-3px); }

.btn-sm  { padding: 11px 20px; font-size: .9rem; }
.btn-lg  { padding: 16px 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }

/* Ripple */
.ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: rgba(255,255,255,.45); pointer-events: none;
    animation: rippleOut .62s var(--ease-out) forwards; z-index: 0;
}
.btn-secondary .ripple, .btn-ghost .ripple { background: var(--accent-glow); }

.badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
}
.badge-success { background: rgba(15,157,110,.12); color: var(--success); }
.badge-solid   { background: var(--accent); color: #fff; }

.pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li {
    padding: 6px 14px; background: var(--bg-tertiary); color: var(--text-primary);
    border-radius: var(--radius-full); font-size: .84rem; font-weight: 500;
    border: 1px solid transparent; transition: all .25s var(--ease);
}
.pill-list li:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    background: var(--accent); z-index: 1002;
    transition: width .08s linear;
}

header {
    position: fixed; top: 0; left: 0; width: 100%;
    height: var(--header-height); z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 var(--border-soft);
    transition: height .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
header.scrolled { height: 68px; box-shadow: 0 6px 30px rgba(16,24,45,.10), 0 1px 0 var(--border-soft); }
header.hidden { transform: translateY(-100%); transition: transform .4s var(--ease); }

.header-container { display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 20px; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo-img { height: 46px; width: auto; transition: height .35s var(--ease), transform .4s var(--ease-spring); }
header.scrolled .logo-img { height: 38px; }
.logo:hover .logo-img { transform: scale(1.04); }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-size: 1.32rem; font-weight: 800; letter-spacing: -.035em; color: var(--text-primary); }
.logo-sub  { font-size: .68rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); }

nav { display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; align-items: center; gap: 4px; }
.nav-list > li { position: relative; }

.nav-list > li > a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--text-secondary); text-decoration: none;
    font-weight: 550; font-size: .94rem; padding: 9px 15px;
    border-radius: var(--radius-full); position: relative;
    transition: color .25s var(--ease), background-color .25s var(--ease);
    white-space: nowrap;
}
.nav-list > li > a:hover { color: var(--accent); background: var(--accent-soft); }
.nav-list > li > a.active { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.nav-list > li > a.active::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 18px; height: 3px; border-radius: 3px; background: var(--accent);
    animation: navDot .35s var(--ease-spring);
}
.nav-list .has-drop > a i.chev { font-size: .68rem; transition: transform .3s var(--ease); }
.nav-list .has-drop:hover > a i.chev { transform: rotate(180deg); }

/* Megamenu */
.mega {
    position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 620px; max-width: 90vw; padding: 20px;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s var(--ease), transform .28s var(--ease-out), visibility .28s;
    z-index: 60;
}
.nav-list .has-drop:hover .mega,
.nav-list .has-drop:focus-within .mega {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.mega::before {
    content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 16px; height: 16px; background: var(--card-bg);
    border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
    border-radius: 3px 0 0 0;
}
.mega-item {
    display: flex; gap: 14px; padding: 14px; border-radius: var(--radius-md);
    text-decoration: none; transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.mega-item:hover { background: var(--accent-soft); transform: translateX(4px); }
.mega-icon {
    flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
    font-size: 1.1rem; transition: all .25s var(--ease);
}
.mega-item:hover .mega-icon { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.06); }
.mega-item strong { display: block; font-size: .96rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.mega-item span   { font-size: .84rem; color: var(--text-secondary); line-height: 1.5; }
.mega-foot {
    grid-column: 1 / -1; margin-top: 6px; padding: 14px 16px;
    border-radius: var(--radius-md); background: var(--bg-secondary);
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mega-foot span { font-size: .88rem; color: var(--text-secondary); }

.nav-cta {
    background: var(--accent) !important; color: #fff !important;
    font-weight: 700 !important; padding: 11px 24px !important;
    box-shadow: var(--shadow-accent);
    transition: transform .28s var(--ease-spring), box-shadow .3s var(--ease), background-color .25s var(--ease) !important;
}
.nav-cta:hover { background: var(--accent-hover) !important; transform: translateY(-2px); box-shadow: 0 16px 34px var(--accent-glow); }

.nav-phone {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    padding: 8px 14px; border-radius: var(--radius-full);
    border: 1px solid var(--border-color); color: var(--text-primary);
    font-weight: 650; font-size: .9rem; transition: all .25s var(--ease);
}
.nav-phone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.status-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0;
}
.status-dot.open { background: var(--success); box-shadow: 0 0 0 0 rgba(15,157,110,.55); animation: pulseDot 2.2s infinite; }

.mobile-menu-btn {
    display: none; background: none; border: none; cursor: pointer;
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    position: relative; color: var(--text-primary);
}
.mobile-menu-btn span {
    position: absolute; left: 12px; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .35s var(--ease-spring), opacity .2s var(--ease), width .3s var(--ease);
}
.mobile-menu-btn span:nth-child(1) { top: 16px; }
.mobile-menu-btn span:nth-child(2) { top: 22px; width: 16px; }
.mobile-menu-btn span:nth-child(3) { top: 28px; }
.mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 22px; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
    min-height: auto;
    display: flex; align-items: center; position: relative; z-index: 1;
    padding-block: 46px 78px;   /* onderaan wat extra lucht boven de schuine lijn */
    background: radial-gradient(ellipse 90% 60% at 78% 42%, var(--accent-softer), transparent 62%),
                linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow: hidden;
}
.hero .container { display: grid; grid-template-columns: 1.08fr .92fr; gap: 34px; align-items: center; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px; margin-bottom: 18px;
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    border-radius: var(--radius-full); color: var(--accent);
    font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.hero-badge b {
    background: var(--accent); color: #fff; padding: 3px 11px;
    border-radius: var(--radius-full); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
}
.hero-badge i { font-size: .78rem; }

.hero h1 {
    font-size: var(--fs-display); font-weight: 830; line-height: 1.1;
    letter-spacing: -.032em; margin-bottom: 16px; color: var(--text-primary);
    text-wrap: balance;
    /* Lange woorden als "Gipsplaatafwerking" mogen nooit buiten beeld vallen */
    overflow-wrap: break-word; hyphens: auto;
}
@media (max-width: 480px) {
    .hero h1 { font-size: clamp(1.85rem, 8.6vw, 2.45rem); letter-spacing: -.02em; }
}

.hero-rotator {
    display: inline-flex; align-items: baseline; gap: 10px;
    font-size: 1.02rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 14px;
}
.rotator-track {
    position: relative; display: inline-block; height: 1.6em; overflow: hidden;
    vertical-align: bottom; min-width: 9.5ch;
}
.rotator-track span {
    display: block; height: 1.6em; line-height: 1.6em;
    color: var(--accent); font-weight: 800; white-space: nowrap;
}

.hero p.hero-lead {
    font-size: var(--fs-lead); color: var(--text-secondary);
    margin-bottom: 24px; max-width: 520px; text-wrap: pretty;
}

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-bottom: 0; }
.hero-trust li {
    list-style: none; display: flex; align-items: center; gap: 8px;
    font-size: .88rem; color: var(--text-secondary); font-weight: 550;
}
.hero-trust i { color: var(--success); font-size: .85rem; }

.hero-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    padding-top: 26px; border-top: 1px solid var(--border-color);
}
.stat-item { position: relative; padding-right: 10px; min-width: 0; }
.stat-item:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 12%; height: 60%;
    width: 1px; background: var(--border-color);
}
.stat-number {
    display: block; font-size: clamp(1.15rem, 1.85vw, 1.72rem); font-weight: 850;
    white-space: nowrap;
    color: var(--accent); letter-spacing: -.03em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .78rem; color: var(--text-secondary); line-height: 1.35; display: block; }

/* Hero visual + blobs */
.hero-visual {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 470px; overflow: visible;
}
.hero-blobs-container {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.hero-blob-left, .hero-blob-right { position: absolute; will-change: transform, border-radius; }
.hero-blob-left {
    width: min(330px, 36vw); aspect-ratio: 1;
    background: var(--blue-blob-1);
    border-radius: 58% 42% 54% 46% / 52% 54% 46% 48%;
    box-shadow: 0 20px 50px rgba(26, 86, 219, .16);
    z-index: 1; left: 12%; top: 50%; opacity: .95;
    animation: blobMorphA calc(9s / var(--blob-speed)) ease-in-out infinite,
               blobFloatA calc(11s / var(--blob-speed)) ease-in-out infinite;
}
.hero-blob-right {
    width: min(250px, 28vw); aspect-ratio: .9;
    background: var(--blue-blob-2);
    border-radius: 46% 54% 50% 50% / 54% 46% 50% 50%;
    box-shadow: 0 16px 42px rgba(37, 99, 235, .14);
    z-index: 2; left: 40%; top: 54%; opacity: .55;
    animation: blobMorphB calc(8s / var(--blob-speed)) ease-in-out infinite,
               blobFloatB calc(10s / var(--blob-speed)) ease-in-out infinite;
}
.hero-worker-img {
    position: relative; z-index: 3;
    width: min(400px, 44vw); max-height: 490px; object-fit: contain;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)) drop-shadow(0 8px 18px rgba(0,0,0,.34))
            drop-shadow(0 18px 44px rgba(0,0,0,.16)) drop-shadow(0 30px 70px rgba(0,0,0,.06));
}

/* Zwevende informatiekaartjes bij de hero-afbeelding */
.hero-card {
    position: absolute; z-index: 4;
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: 13px 17px;
    box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px;
    white-space: nowrap;
}
.hero-card i { color: var(--accent); font-size: 1.05rem; }
.hero-card strong { display: block; font-size: .87rem; font-weight: 750; letter-spacing: -.01em; }
.hero-card span { font-size: .75rem; color: var(--text-secondary); }
.hero-card.c1 { top: 8%; left: -1%; }
.hero-card.c2 { bottom: 14%; right: -2%; }
.hero-card.c3 { bottom: 3%; left: 6%; }
.hero-card .dot-ok { width: 9px; height: 9px; border-radius: 50%; background: var(--success); animation: pulseDot 2.2s infinite; }

.hero-scroll {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: var(--text-muted); font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; text-decoration: none; z-index: 5;
    transition: color .25s var(--ease);
}
.hero-scroll:hover { color: var(--accent); }
.hero-scroll .mouse {
    width: 24px; height: 38px; border: 2px solid currentColor;
    border-radius: 14px; position: relative;
}
.hero-scroll .mouse::after {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 3px; height: 7px; border-radius: 2px; background: currentColor;
    animation: scrollWheel 1.9s ease-in-out infinite;
}

/* ==========================================================================
   7. LOGOBALK / MARQUEE
   ========================================================================== */
.logobar {
    padding: 22px 0; border-block: 1px solid var(--border-color);
    background: var(--bg-primary); overflow: hidden;
    position: relative; z-index: 5;
}
.logobar-title {
    text-align: center; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700; margin-bottom: 22px;
}
.marquee {
    display: flex; overflow: hidden; gap: 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track {
    display: flex; align-items: center; gap: 46px; flex-shrink: 0;
    padding-right: 46px; animation: marqueeScroll 38s linear infinite;
}
.marquee-item {
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
    font-weight: 650; font-size: .92rem; color: var(--text-muted);
    letter-spacing: -.02em; opacity: .72;
    transition: opacity .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.marquee-item:hover { opacity: 1; color: var(--accent); transform: scale(1.05); }
.marquee-item i { font-size: 1rem; color: var(--accent); opacity: .85; }

/* ==========================================================================
   8. USP
   ========================================================================== */
.usp-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px;
}
.usp-card {
    position: relative; overflow: hidden;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 24px 22px;
    box-shadow: var(--shadow-xs);
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.usp-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 62%);
    opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.usp-card:hover::before { opacity: 1; }
.usp-num {
    position: absolute; top: 16px; right: 22px;
    font-size: 3.4rem; font-weight: 850; line-height: 1;
    color: var(--text-primary); opacity: .045; letter-spacing: -.05em;
}
.usp-icon {
    width: 46px; height: 46px; border-radius: var(--radius-md);
    display: grid; place-items: center; font-size: 1.35rem;
    background: var(--accent-soft);
    color: var(--accent); border: 1px solid var(--accent-line);
    margin-bottom: 18px; position: relative; z-index: 1;
    transition: transform .45s var(--ease-spring), background-color .3s var(--ease), color .3s var(--ease);
}
.usp-card:hover .usp-icon { background: var(--accent); color: #fff; }
.usp-card h3 { font-size: 1.04rem; font-weight: 750; margin-bottom: 9px; letter-spacing: -.02em; position: relative; z-index: 1; }
.usp-card p  { color: var(--text-secondary); font-size: .89rem; line-height: 1.68; position: relative; z-index: 1; }

/* ==========================================================================
   9. DIENSTEN
   ========================================================================== */
.dienst-dual { padding-block: var(--section-y); position: relative; overflow: visible; }
.dienst-dual-inner { display: flex; flex-direction: column; gap: 30px; }

.dienst-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    align-items: center; min-height: 320px;
}
.dienst-visuals { display: flex; flex-direction: column; gap: 16px; position: relative; }
.dienst-mini-visual {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 260px;
}
.blob-mini, .blob-mini-2 {
    position: absolute; top: 50%; left: 50%; will-change: transform, border-radius;
}
.blob-mini {
    width: min(285px, 66%); aspect-ratio: 1;
    background: var(--blue-blob-1);
    border-radius: 58% 42% 54% 46% / 52% 54% 46% 48%;
    box-shadow: 0 18px 44px rgba(26, 86, 219, .14);
    z-index: 1; opacity: .92;
    animation: blobMorphMiniA calc(9s / var(--blob-speed)) ease-in-out infinite,
               blobFloatMiniA calc(11s / var(--blob-speed)) ease-in-out infinite;
}
.blob-mini-2 {
    width: min(215px, 52%); aspect-ratio: .93;
    background: var(--blue-blob-2);
    border-radius: 48% 52% 46% 54% / 46% 55% 45% 54%;
    z-index: 1; opacity: .4;
    animation: blobMorphMiniB calc(8s / var(--blob-speed)) ease-in-out infinite,
               blobFloatMiniB calc(10s / var(--blob-speed)) ease-in-out infinite;
}
.worker-png-mini {
    width: min(265px, 70%); max-height: 340px; object-fit: contain;
    position: relative; z-index: 3;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.46)) drop-shadow(0 8px 18px rgba(0,0,0,.3))
            drop-shadow(0 16px 38px rgba(0,0,0,.12));
    transition: transform .55s var(--ease-out), filter .4s var(--ease);
}
.dienst-mini-visual:hover .worker-png-mini { transform: translateY(-5px); }

.dienst-text-item .zone-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 0 7px; background: none; color: var(--accent);
    border-radius: 0; border-bottom: 2px solid var(--accent-line);
    font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
}
.dienst-text-item h3 {
    font-size: var(--fs-h3); font-weight: 780; margin-bottom: 12px;
    letter-spacing: -.028em; color: var(--text-primary); line-height: 1.22;
}
.dienst-text-item > p { color: var(--text-secondary); font-size: 1rem; line-height: 1.72; margin-bottom: 18px; }
.dienst-meta {
    display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0;
    padding: 15px 18px; border-radius: var(--radius-md);
    background: var(--bg-tertiary); border: 1px solid var(--border-soft);
}
.dienst-meta div { display: flex; align-items: center; gap: 9px; font-size: .88rem; }
.dienst-meta i { color: var(--accent); }
.dienst-meta strong { color: var(--text-primary); font-weight: 750; }
.dienst-meta span { color: var(--text-secondary); }
.dienst-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ==========================================================================
   10. CALCULATOR
   ========================================================================== */
.contact-intro {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center;
    margin-bottom: 54px;
}
.contact-intro-tekst .section-kicker,
.contact-intro-tekst .section-title,
.contact-intro-tekst .section-sub { text-align: left; }
.contact-intro-tekst .section-title { margin-top: 10px; }
.contact-intro-tekst .section-sub { margin-left: 0; }
.contact-intro-acties { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }
.contact-intro-link {
    color: var(--accent); font-weight: 600; font-size: .92rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.contact-intro-link:hover { text-decoration-thickness: 2px; }
.contact-intro-foto {
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}
.contact-intro-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
    .contact-intro { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
    .contact-intro-foto { order: -1; aspect-ratio: 16 / 9; }
}

/* Slim intro-kop op de losstaande aanvraagpagina's (snel/uitgebreid) */
.aanvraag-tel-hint {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-secondary); font-size: .92rem; margin-top: 14px;
}
.aanvraag-tel-hint a { color: var(--accent); font-weight: 700; text-decoration: none; }
.aanvraag-tel-hint a:hover { text-decoration: underline; }

.calc-wrap {
    display: grid; grid-template-columns: 1.35fr .85fr; gap: 26px; align-items: start;
}
.calc-panel {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden;
}
.calc-steps {
    display: flex; gap: 4px; padding: 18px 22px;
    border-bottom: 1px solid var(--border-color); background: var(--bg-secondary);
    overflow-x: auto; scrollbar-width: none;
}
.calc-steps::-webkit-scrollbar { display: none; }
.calc-step-tab {
    display: flex; align-items: center; gap: 9px; padding: 9px 15px;
    border-radius: var(--radius-full); font-size: .85rem; font-weight: 650;
    color: var(--text-muted); white-space: nowrap; cursor: pointer;
    border: none; background: transparent; transition: all .28s var(--ease);
}
.calc-step-tab .n {
    width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bg-tertiary); color: var(--text-muted);
    font-size: .76rem; font-weight: 800; transition: all .3s var(--ease-spring); flex-shrink: 0;
}
.calc-step-tab.active { color: var(--accent); background: var(--accent-soft); }
.calc-step-tab.active .n { background: var(--accent); color: #fff; transform: scale(1.1); }
.calc-step-tab.done .n { background: var(--success); color: #fff; }
.calc-step-tab.done .n::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .6rem; }
.calc-step-tab.done .n span { display: none; }

.calc-body { padding: 28px 26px; position: relative; min-height: 330px; }
.calc-step { display: none; animation: stepIn .45s var(--ease-out); }
.calc-step.active { display: block; }
.calc-step > h3 { font-size: 1.16rem; font-weight: 760; margin-bottom: 6px; letter-spacing: -.02em; }
.calc-step > p.hint { font-size: .9rem; color: var(--text-secondary); margin-bottom: 20px; }

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.option-card {
    position: relative; cursor: pointer; display: block;
    padding: 17px 18px 17px 50px; border-radius: var(--radius-md);
    border: 2px solid var(--border-color); background: var(--bg-primary);
    transition: all .28s var(--ease); user-select: none;
}
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card::before {
    content: ''; position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    width: 21px; height: 21px; border-radius: 7px;
    border: 2px solid var(--border-color); background: var(--bg-primary);
    transition: all .25s var(--ease);
}
.option-card.radio::before { border-radius: 50%; }
.option-card::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 21px; top: 50%; transform: translateY(-50%) scale(0);
    font-size: .68rem; color: #fff; transition: transform .28s var(--ease-spring);
}
.option-card:hover { border-color: var(--accent-line); background: var(--accent-softer); transform: translateY(-2px); }
.option-card:has(input:checked) {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 6px 20px var(--accent-glow);
}
.option-card:has(input:checked)::before { background: var(--accent); border-color: var(--accent); }
.option-card:has(input:checked)::after { transform: translateY(-50%) scale(1); }
.option-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.option-card b { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 700; margin-bottom: 3px; }
.option-card b i { color: var(--accent); }
.option-card small { display: block; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.option-card .prijs { color: var(--accent); font-weight: 700; font-size: .82rem; }

.slider-wrap { margin-top: 8px; }
.slider-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; gap: 14px; }
.slider-value {
    font-size: 2.3rem; font-weight: 850; color: var(--accent);
    letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1;
}
.slider-value small { font-size: 1rem; font-weight: 650; color: var(--text-secondary); }
.m2-input {
    width: 130px; padding: 11px 14px; border-radius: var(--radius-sm);
    border: 2px solid var(--border-color); background: var(--bg-primary);
    font-weight: 700; text-align: right; transition: border-color .25s var(--ease);
}
.m2-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

input[type=range].sky-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
    border-radius: 99px; background: var(--bg-tertiary); outline: none; cursor: pointer;
    background-image: linear-gradient(90deg, var(--accent), var(--accent));
    background-size: var(--fill, 30%) 100%; background-repeat: no-repeat;
}
input[type=range].sky-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 4px solid var(--accent); cursor: grab;
    box-shadow: 0 4px 14px var(--accent-glow); transition: transform .2s var(--ease-spring);
}
input[type=range].sky-range::-webkit-slider-thumb:hover { transform: scale(1.16); }
input[type=range].sky-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
input[type=range].sky-range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    border: 4px solid var(--accent); cursor: grab; box-shadow: 0 4px 14px var(--accent-glow);
}
.slider-ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: .76rem; color: var(--text-muted); }
.slider-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.slider-presets button {
    padding: 7px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-color);
    background: var(--bg-primary); color: var(--text-secondary); font-size: .82rem;
    font-weight: 650; cursor: pointer; transition: all .25s var(--ease);
}
.slider-presets button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }

.calc-nav { display: flex; justify-content: space-between; gap: 12px; padding: 20px 26px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }

/* Resultaatpaneel */
.calc-result {
    position: sticky; top: calc(var(--header-height) + 20px);
    /* Zelfde "bouwtekening"-gevoel als de footer (.super-footer): een
       blauwdruk-raster op een blauwe ondergrond, hier een fractie lichter
       dan het navy van de footer. */
    background-color: #2c649f;
    color: #fff; border-radius: var(--radius-xl); padding: 28px 26px;
    box-shadow: 0 16px 40px rgba(13, 33, 71, .22);
    border: 1px solid rgba(255,255,255,.12); overflow: hidden;
}
.calc-result::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .85;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.1) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.1) 2px, transparent 2px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}
.calc-result::after {
    content: ''; position: absolute; inset: -30% -15%; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 58%);
}
.calc-result > * { position: relative; z-index: 2; }
.calc-result .kicker { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; font-weight: 700; }
.calc-price {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 850; letter-spacing: -.04em;
    margin: 8px 0 4px; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.calc-price .sep { opacity: .5; font-weight: 500; margin: 0 4px; }
.calc-price-note { font-size: .82rem; opacity: .72; margin-bottom: 20px; }
.calc-lines { list-style: none; display: grid; gap: 9px; padding: 18px 0; margin-bottom: 4px; border-block: 1px solid rgba(255,255,255,.16); }
.calc-lines li { display: flex; justify-content: space-between; gap: 14px; font-size: .88rem; }
.calc-lines li span:first-child { opacity: .78; }
.calc-lines li span:last-child { font-weight: 700; text-align: right; }
.calc-lines li.korting span:last-child { color: #6ee7b7; }
.calc-disclaimer { font-size: .75rem; opacity: .62; line-height: 1.6; margin-top: 16px; }
.calc-result .btn-light { width: 100%; margin-top: 18px; }
.calc-badge-save {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 7px 14px; border-radius: var(--radius-full);
    background: rgba(110,231,183,.16); color: #6ee7b7; font-size: .8rem; font-weight: 700;
}

/* ==========================================================================
   11. PORTFOLIO
   ========================================================================== */
.filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-bottom: 36px; }
.filter-btn {
    padding: 10px 21px; border-radius: var(--radius-full);
    border: 1px solid var(--border-color); background: var(--card-bg);
    color: var(--text-secondary); font-weight: 650; font-size: .89rem;
    cursor: pointer; transition: all .28s var(--ease);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.filter-btn .cnt { opacity: .6; font-size: .78rem; margin-left: 5px; }

/* --- Uitgevoerde projecten -------------------------------------------------
   Elk project krijgt een eigen blok: links de foto's, rechts de gegevens.
   Het tweede project staat gespiegeld, zodat de pagina niet in één kolom
   blijft hangen. Zie includes/secties/portfolio.php. */
.project-lijst { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 84px); }

.project-blok {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(28px, 3.4vw, 52px); align-items: center;
}
.project-blok.gespiegeld .project-galerij { order: 2; }

/* De hoofdfoto */
.project-hoofdfoto {
    display: block; width: 100%; padding: 0; border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); overflow: hidden; position: relative;
    background: var(--bg-tertiary); cursor: zoom-in; aspect-ratio: 4/3;
    box-shadow: var(--shadow-sm);
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease),
                border-color .35s var(--ease);
}
.project-hoofdfoto:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.project-hoofdfoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-out); }
.project-hoofdfoto:hover img { transform: scale(1.05); }
.project-hoofdfoto::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(6,12,28,.62) 0%, rgba(6,12,28,.08) 38%, transparent 62%);
}
.project-zoom {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.94); color: var(--accent); font-size: .9rem;
    opacity: 0; transform: scale(.6) rotate(-30deg);
    transition: all .38s var(--ease-spring);
}
.project-hoofdfoto:hover .project-zoom { opacity: 1; transform: scale(1) rotate(0); }
.project-teller {
    position: absolute; left: 14px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: var(--radius-full);
    background: rgba(8,14,30,.72); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}

/* De rij miniaturen eronder */
/* Altijd één rij, of het er nu vier of vijf zijn. */
.project-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.project-mini {
    padding: 0; border: 1px solid var(--border-color); background: var(--bg-tertiary);
    border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; cursor: pointer;
    transition: border-color .3s var(--ease), transform .35s var(--ease-out), opacity .3s var(--ease);
}
.project-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-mini:hover { border-color: var(--accent); transform: translateY(-3px); }
.project-meer {
    display: grid; place-content: center; gap: 2px; text-align: center;
    background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}
.project-meer span   { font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em; }
.project-meer small  { font-size: .7rem; font-weight: 650; opacity: .8; }

/* Nog geen foto's in de map? Dan dit nette vak in plaats van een gat. */
.project-nogleeg {
    aspect-ratio: 16/10; min-height: 240px; max-height: 360px;
    display: grid; place-content: center; justify-items: center;
    gap: 8px; text-align: center; padding: 24px;
    border: 1px dashed var(--accent-line); border-radius: var(--radius-lg);
    background: var(--accent-softer); color: var(--text-secondary);
}
.project-nogleeg i      { font-size: 1.7rem; color: var(--accent); opacity: .55; margin-bottom: 4px; }
.project-nogleeg strong { color: var(--text-primary); font-size: 1rem; font-weight: 720; }
.project-nogleeg span   { font-size: .86rem; max-width: 30ch; line-height: 1.55; }

/* De gegevens ernaast */
.project-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.project-label {
    padding: 5px 13px; border-radius: var(--radius-full);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.project-tekst h3 { font-size: var(--fs-h3); font-weight: 780; letter-spacing: -.025em; margin-bottom: 12px; line-height: 1.28; }
.project-tekst > p { color: var(--text-secondary); font-size: .95rem; line-height: 1.72; }
.project-specs {
    display: grid; gap: 1px; background: var(--border-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; margin: 22px 0;
}
.project-specs div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--card-bg); font-size: .88rem; }
.project-specs dt  { color: var(--text-secondary); }
.project-specs dd  { font-weight: 700; text-align: right; }

/* Afsluitend regeltje onder de projecten */
.project-slot {
    margin-top: clamp(40px, 5vw, 64px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px 26px; padding: 22px 26px;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.project-slot p { color: var(--text-secondary); font-size: .93rem; margin: 0; }

@media (max-width: 900px) {
    .project-blok { grid-template-columns: 1fr; gap: 24px; }
    .project-blok.gespiegeld .project-galerij { order: 0; }
    .project-slot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
    .project-strip { gap: 8px; }
    .project-meer span { font-size: .98rem; }
    .project-meer small { display: none; }
}

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 12000; display: none;
    background: rgba(4, 8, 18, .93); backdrop-filter: blur(14px);
    padding: 40px 20px; opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox.active { display: flex; align-items: center; justify-content: center; opacity: 1; }
.lightbox-inner {
    max-width: 1050px; width: 100%; max-height: 90vh;
    /* Vaste hoogte: dan krijgt de foto alle ruimte die er is, in plaats van
       dat de hoogte meebeweegt met de lengte van de projecttekst. */
    height: min(86vh, 680px);
    background: var(--card-bg); border-radius: var(--radius-xl); overflow: hidden;
    display: grid; grid-template-columns: 1.25fr .75fr;
    animation: modalIn .42s var(--ease-out); box-shadow: var(--shadow-xl);
}
/* De foto krijgt een donkere ondergrond en wordt niet bijgesneden: een
   staande foto van de bouw hoort geheel zichtbaar te zijn. */
.lightbox-img { background: #0b0e16; min-height: 300px; position: relative; overflow: hidden; cursor: zoom-in; }
.lightbox-img img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    transition: transform .4s var(--ease-out);
}

/* Knopje rechtsonder in de foto */
.lightbox-groot {
    position: absolute; right: 14px; bottom: 14px; z-index: 4;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-full);
    background: rgba(8,14,30,.66); backdrop-filter: blur(10px);
    color: #fff; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
    transition: background .25s var(--ease);
}
.lightbox-groot:hover { background: rgba(8,14,30,.9); }

/* Stap 1 — de foto neemt het hele venster in, de toelichting gaat even weg. */
.lightbox.groot .lightbox-inner {
    grid-template-columns: 1fr;
    max-width: min(1600px, 96vw); height: min(94vh, 1100px);
    background: transparent; box-shadow: none;
}
.lightbox.groot .lightbox-body { display: none; }
.lightbox.groot .lightbox-img  { background: transparent; }

/* Stap 2 — nog verder inzoomen op het punt waar je klikte. */
.lightbox.ingezoomd .lightbox-img     { cursor: zoom-out; }
.lightbox.ingezoomd .lightbox-img img { transform: scale(2.4); }

@media (prefers-reduced-motion: reduce) {
    .lightbox-img img { transition: none; }
}
.lightbox-teller {
    position: absolute; left: 16px; bottom: 16px;
    padding: 5px 13px; border-radius: var(--radius-full);
    background: rgba(8,14,30,.66); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .03em;
}
.lightbox-body { padding: 34px 32px; overflow-y: auto; }

/* Rij miniaturen in de lightbox, zodat je bij veel foto's snel kunt springen */
.lightbox-strip {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 20px;
    scrollbar-width: thin; scroll-snap-type: x proximity;
    /* Zachte rand rechts, zodat te zien is dat de rij doorloopt */
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.lightbox-strip:empty { display: none; }
.lb-mini {
    flex: 0 0 62px; height: 47px; padding: 0; cursor: pointer; scroll-snap-align: center;
    border: 1px solid var(--border-color); border-radius: var(--radius-xs);
    overflow: hidden; background: var(--bg-tertiary); opacity: .62;
    transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.lb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-mini:hover { opacity: 1; }
.lb-mini.actief { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lightbox-body h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 12px; }
.lightbox-body p  { color: var(--text-secondary); line-height: 1.75; margin-bottom: 22px; }
.lightbox-specs { display: grid; gap: 1px; background: var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 22px; }
.lightbox-specs div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 16px; background: var(--card-bg); font-size: .9rem; }
.lightbox-specs dt { color: var(--text-secondary); }
.lightbox-specs dd { font-weight: 700; text-align: right; }
.lightbox-close {
    position: absolute; top: 22px; right: 24px; z-index: 5;
    width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.15rem;
    backdrop-filter: blur(10px); transition: all .28s var(--ease);
}
.lightbox-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg) scale(1.08); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem;
    backdrop-filter: blur(10px); transition: all .28s var(--ease); z-index: 5;
}
.lightbox-nav:hover { background: rgba(255,255,255,.3); }
.lightbox-nav.prev { left: 26px; }
.lightbox-nav.next { right: 26px; }

/* ==========================================================================
   12. CASES
   ========================================================================== */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; }
.case-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm); position: relative;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
.case-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--blue-blob-3));
    transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out);
}
.case-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.case-card:hover::before { transform: scaleX(1); }
.case-header { padding: 26px 26px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.case-icon {
    width: 62px; height: 62px; display: grid; place-items: center; font-size: 1.7rem;
    border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-line);
    transition: transform .45s var(--ease-spring);
}
.case-card:hover .case-icon { transform: rotate(-8deg) scale(1.06); }
.case-body { padding: 20px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.case-body h4 { font-size: 1.24rem; font-weight: 780; margin-bottom: 4px; letter-spacing: -.026em; }
.case-loc { font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.case-stats { display: flex; gap: 8px; margin: 4px 0 18px; padding: 16px 0; border-block: 1px solid var(--border-color); }
.case-stat { flex: 1; text-align: center; position: relative; }
.case-stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: var(--border-color); }
.case-stat-number {
    display: block; font-size: 1.44rem; font-weight: 850; color: var(--accent);
    line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.case-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 650; }
.case-detail { color: var(--text-secondary); line-height: 1.7; font-size: .92rem; flex: 1; }
.case-highlight {
    display: flex; align-items: center; gap: 11px; margin-top: 18px;
    padding: 13px 16px; background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-sm); font-weight: 700; font-size: .87rem;
    border: 1px solid var(--accent-line);
}

/* Cijferbalk */
.stats-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px;
    background: var(--border-color); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); overflow: hidden; margin-top: 46px;
}
.stats-band > div { background: var(--card-bg); padding: 30px 22px; text-align: center; transition: background-color .3s var(--ease); }
.stats-band > div:hover { background: var(--accent-soft); }
.stats-band .n {
    display: block; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 850;
    color: var(--accent); letter-spacing: -.038em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stats-band .l { font-size: .84rem; color: var(--text-secondary); margin-top: 4px; display: block; }

/* ==========================================================================
   13. KWALITEIT / AFWERKINGSKLASSEN
   ========================================================================== */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 64px; }
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cert-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-info-grid { grid-template-columns: 1fr; } }
.cert-card {
    text-align: center; padding: 28px 20px; border-radius: var(--radius-lg);
    background: var(--card-bg); border: 1px solid var(--border-color);
    transition: transform .42s var(--ease-out), box-shadow .42s var(--ease), border-color .3s var(--ease);
}
.cert-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.cert-icon {
    width: 60px; height: 60px; margin: 0 auto 15px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.4rem;
    background: var(--accent-soft); color: var(--accent); border: 2px solid var(--accent-line);
    transition: all .4s var(--ease-spring);
}
.cert-card:hover .cert-icon { background: var(--accent); color: #fff; transform: rotateY(180deg); }
.cert-card .code {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
    color: var(--accent); text-transform: uppercase; margin-bottom: 6px;
}
.cert-card h4 { font-size: 1rem; font-weight: 750; margin-bottom: 7px; letter-spacing: -.015em; }
.cert-card p  { font-size: .86rem; color: var(--text-secondary); line-height: 1.6; }

/* De klassekaarten staan verderop, in blok 27. */

/* ==========================================================================
   14. WERKWIJZE
   ========================================================================== */
.timeline { position: relative; margin-top: 50px; }
.timeline::before {
    content: ''; position: absolute; left: 31px; top: 20px; bottom: 20px; width: 2px;
    background: var(--border-color);
}
.timeline-progress {
    position: absolute; left: 31px; top: 20px; width: 2px; height: 0;
    background: var(--accent);
    transition: height .18s linear;
    /* Bewust GEEN positieve z-index: de timeline-items krijgen via
       will-change (voor de scroll-onthulling) altijd hun eigen stapel-
       context, waardoor hun witte cirkel anders alsnog onder deze lijn
       zou duiken. Zonder z-index hier volgt de tekenvolgorde gewoon de
       broncode, en die staat vóór de items - dus deze lijn blijft achter
       de iconen. */
    z-index: 0;
}
.timeline-item { position: relative; padding-left: 84px; padding-bottom: 38px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute; left: 0; top: 0; width: 64px; height: 64px;
    border-radius: var(--radius-md); display: grid; place-items: center;
    background: var(--card-bg); border: 2px solid var(--border-color);
    color: var(--text-muted); font-size: 1.25rem; z-index: 2;
    transition: all .5s var(--ease-spring);
}
.timeline-item.reached .timeline-dot {
    border-color: var(--accent); background: var(--accent); color: #fff;
    box-shadow: 0 10px 30px var(--accent-glow); transform: scale(1.04);
}
.timeline-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.timeline-nr { font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.timeline-item h4 { font-size: 1.16rem; font-weight: 770; letter-spacing: -.022em; }
.timeline-duur {
    margin-left: auto; padding: 5px 13px; border-radius: var(--radius-full);
    background: var(--bg-tertiary); font-size: .78rem; font-weight: 650; color: var(--text-secondary);
    white-space: nowrap;
}
.timeline-item p { color: var(--text-secondary); font-size: .94rem; line-height: 1.72; max-width: 620px; }

/* ==========================================================================
   15. REVIEWS
   ========================================================================== */
.reviews-top { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 40px; }
.rating-big { display: flex; align-items: center; gap: 15px; padding: 15px 26px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.rating-score { font-size: 2rem; font-weight: 850; color: var(--accent); letter-spacing: -.035em; line-height: 1; }
.rating-stars { color: #f5a623; font-size: .95rem; letter-spacing: 2px; }
.rating-meta { font-size: .8rem; color: var(--text-secondary); }

.reviews-viewport { overflow: hidden; position: relative; padding: 6px; }
.reviews-track { display: flex; gap: 22px; transition: transform .68s var(--ease-out); will-change: transform; }
.review-card {
    flex: 0 0 calc((100% - 44px) / 3); min-width: 280px;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 30px 28px;
    display: flex; flex-direction: column; position: relative;
    box-shadow: var(--shadow-xs); transition: box-shadow .4s var(--ease), transform .4s var(--ease-out);
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.review-card::before {
    content: '\201C'; position: absolute; top: 6px; right: 22px;
    font-size: 5.5rem; line-height: 1; font-family: Georgia, serif;
    color: var(--accent); opacity: .1;
}
.review-stars { color: #f5a623; margin-bottom: 14px; font-size: .92rem; letter-spacing: 2px; }
.review-text { color: var(--text-secondary); line-height: 1.78; font-size: .94rem; flex: 1; margin-bottom: 22px; }
.review-foot { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border-color); }
.review-avatar {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent);
    color: #fff; font-weight: 800; font-size: 1rem; flex-shrink: 0; letter-spacing: -.02em;
}
.review-name { font-weight: 750; font-size: .96rem; letter-spacing: -.015em; }
.review-role { font-size: .82rem; color: var(--text-secondary); }
.review-project { font-size: .76rem; color: var(--accent); font-weight: 650; margin-top: 2px; }

.slider-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 34px; }
.slider-btn {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-color);
    background: var(--card-bg); color: var(--text-primary); cursor: pointer;
    display: grid; place-items: center; transition: all .28s var(--ease);
}
.slider-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }
.slider-btn:disabled { opacity: .35; cursor: not-allowed; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
    width: 9px; height: 9px; border-radius: 99px; border: none; padding: 0; cursor: pointer;
    background: var(--border-color); transition: all .35s var(--ease-spring);
}
.slider-dots button.active { background: var(--accent); width: 30px; }

/* ==========================================================================
   16. WERKGEBIED
   ========================================================================== */
.gebied-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: center; }
.gebied-map { position: relative; display: grid; place-items: center; }
.gebied-map svg { width: 100%; max-width: 420px; height: auto; overflow: visible; }
.gebied-map .prov {
    fill: var(--bg-tertiary); stroke: var(--bg-primary); stroke-width: 1.4;
    transition: fill .35s var(--ease), transform .35s var(--ease-out);
    transform-origin: center; transform-box: fill-box; cursor: pointer;
}
.gebied-map .prov.kern { fill: var(--accent); }
.gebied-map .prov.actief { fill: var(--accent-line); }
.gebied-map .prov:hover { fill: var(--accent-hover); }
.gebied-map .pin { fill: #fff; stroke: var(--accent); stroke-width: 3; }
/* De opmaak van de radarpuls staat verderop bij de kaart (blok 36). */

.gebied-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px; justify-content: center; font-size: .84rem; color: var(--text-secondary); }
.gebied-legend span { display: inline-flex; align-items: center; gap: 8px; }
.gebied-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

.gebied-steden { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.gebied-steden span {
    padding: 7px 15px; border-radius: var(--radius-full); font-size: .85rem; font-weight: 600;
    background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-secondary);
    transition: all .28s var(--ease);
}
.gebied-steden span:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }

.postcode-check { margin-top: 30px; padding: 24px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.postcode-check h4 { font-size: 1.02rem; font-weight: 750; margin-bottom: 6px; }
.postcode-check p { font-size: .87rem; color: var(--text-secondary); margin-bottom: 16px; }
.postcode-form { display: flex; gap: 10px; flex-wrap: wrap; }
.postcode-form input {
    flex: 1 1 190px; min-width: 0; padding: 13px 17px; border-radius: var(--radius-full);
    border: 2px solid var(--border-color); background: var(--bg-primary);
    font-weight: 650; text-transform: uppercase; transition: border-color .25s var(--ease);
}
.postcode-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.postcode-result { margin-top: 15px; font-size: .9rem; font-weight: 650; display: none; align-items: center; gap: 10px; }
.postcode-result.show { display: flex; animation: fadeUp .4s var(--ease-out); }
.postcode-result.ok { color: var(--success); }
.postcode-result.nope { color: var(--warning); }

/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq-wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: 46px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover { border-color: var(--accent-line); }
.faq-item.open { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 21px 56px 21px 24px; font-size: 1rem; font-weight: 680;
    letter-spacing: -.015em; color: var(--text-primary); position: relative;
    transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-q::after {
    content: ''; position: absolute; right: 24px; top: 50%; width: 12px; height: 2px;
    background: var(--accent); border-radius: 2px; transform: translateY(-50%);
}
.faq-q::before {
    content: ''; position: absolute; right: 29px; top: 50%; width: 2px; height: 12px;
    background: var(--accent); border-radius: 2px; transform: translateY(-50%);
    transition: transform .35s var(--ease-spring), opacity .25s var(--ease);
}
.faq-item.open .faq-q::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); }
.faq-a > div { padding: 0 24px 22px; color: var(--text-secondary); line-height: 1.78; font-size: .93rem; }

.faq-aside {
    position: sticky; top: calc(var(--header-height) + 24px);
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.faq-aside h3 { font-size: 1.24rem; font-weight: 790; letter-spacing: -.025em; margin-bottom: 10px; }
.faq-aside p  { color: var(--text-secondary); font-size: .93rem; line-height: 1.72; margin-bottom: 22px; }
.faq-contactrow { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--border-color); }
.faq-contactrow i { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.faq-contactrow strong { display: block; font-size: .93rem; }
.faq-contactrow a, .faq-contactrow span { font-size: .87rem; color: var(--text-secondary); text-decoration: none; }
.faq-contactrow a:hover { color: var(--accent); }

/* ==========================================================================
   18. VACATURES
   ========================================================================== */
.vac-list { display: grid; gap: 14px; }
.vac-item {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 24px 26px; background: var(--card-bg);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    transition: transform .38s var(--ease-out), box-shadow .38s var(--ease), border-color .3s var(--ease);
}
.vac-item:hover { transform: translateX(6px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.vac-main { flex: 1; min-width: 230px; }
.vac-main h4 { font-size: 1.1rem; font-weight: 760; letter-spacing: -.02em; margin-bottom: 5px; }
.vac-main p  { font-size: .89rem; color: var(--text-secondary); }
.vac-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.vac-tags span {
    padding: 6px 13px; border-radius: var(--radius-full); font-size: .79rem; font-weight: 650;
    background: var(--bg-tertiary); color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 7px;
}
.vac-tags i { color: var(--accent); font-size: .74rem; }

/* ==========================================================================
   19. CONTACT
   ========================================================================== */
.contact-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.contact-info { display: grid; gap: 14px; }
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.contact-tile {
    display: flex; gap: 17px; padding: 22px 24px;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); text-decoration: none;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .3s var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.contact-tile .ico {
    width: 50px; height: 50px; border-radius: var(--radius-md); flex-shrink: 0;
    display: grid; place-items: center; font-size: 1.15rem;
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
    transition: all .4s var(--ease-spring);
}
.contact-tile:hover .ico { background: var(--accent); color: #fff; }
.contact-tile strong { display: block; font-size: .98rem; font-weight: 740; margin-bottom: 3px; }
.contact-tile span   { font-size: .9rem; color: var(--text-secondary); line-height: 1.6; }

.openingstijden { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px 26px; }
.openingstijden h4 { font-size: 1rem; font-weight: 760; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.openingstijden ul { list-style: none; display: grid; gap: 3px; }
.openingstijden li {
    display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px;
    border-radius: var(--radius-xs); font-size: .89rem; color: var(--text-secondary);
}
.openingstijden li.vandaag { background: var(--accent-soft); color: var(--accent); font-weight: 750; }
.openingstijden li span:last-child { font-variant-numeric: tabular-nums; }

.contact-form-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); padding: 34px 32px; box-shadow: var(--shadow-md);
}

/* ==========================================================================
   20. CTA-BANNER
   ========================================================================== */
.cta-banner-wrapper { padding-block: var(--section-y); }
.cta-banner {
    position: relative; overflow: hidden; text-align: center; color: #fff;
    background: linear-gradient(160deg, #10294f 0%, #16386e 100%);
    padding: clamp(40px, 5.5vw, 62px) clamp(24px, 5vw, 52px);
    border-radius: var(--radius-xl);
    box-shadow: 0 34px 70px rgba(13, 33, 71, .32);
    border: 1px solid rgba(255,255,255,.13);
}
.cta-banner::before {
    content: ''; position: absolute; top: -40%; left: -10%; width: 120%; height: 180%;
    background: radial-gradient(circle at 30% 40%, rgba(59,130,246,.18) 0%, transparent 55%);
    pointer-events: none;
}
.cta-banner::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}
.cta-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cta-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,.04); }
.cta-shape:nth-child(1) { width: 320px; height: 320px; top: -60px; left: -60px; }
.cta-shape:nth-child(2) { width: 210px; height: 210px; bottom: -40px; right: -40px; animation-delay: 4s; }
.cta-shape:nth-child(3) { width: 150px; height: 150px; top: 18%; right: 12%; animation-delay: 8s; }
.cta-content { position: relative; z-index: 3; }
.cta-banner h3 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 850; letter-spacing: -.035em; margin-bottom: 15px; text-wrap: balance; }
.cta-banner p  { font-size: var(--fs-lead); opacity: .85; max-width: 620px; margin: 0 auto 30px; }
.cta-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.cta-trust { display: flex; justify-content: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 30px; font-size: .86rem; opacity: .78; }
.cta-trust span { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.super-footer {
    position: relative; overflow: hidden; z-index: 1;
    background-color: #1a3a5c; color: rgba(255,255,255,.78);
    padding: 78px 0 0; border-top: 1px solid rgba(255,255,255,.08);
}
.dark-theme .super-footer { background-color: #0d1b2e; }
.super-footer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .8;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.08) 2px, transparent 2px);
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}
.footer-grid-main {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 40px;
    margin-bottom: 46px; position: relative; z-index: 2;
}
.footer-col h4 {
    font-size: .84rem; text-transform: uppercase; letter-spacing: .13em;
    color: #fff; margin-bottom: 22px; font-weight: 750;
}
.footer-about .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-about .footer-logo img { height: 44px; width: auto; }
.footer-about .footer-logo strong { color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.footer-about p { color: rgba(255,255,255,.7); line-height: 1.78; margin-bottom: 20px; font-size: .93rem; }
.footer-info-list { display: flex; flex-direction: column; gap: 10px; }
.footer-info-item {
    display: flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,.72); font-weight: 600; font-size: .85rem;
}
.footer-info-item i { color: rgba(255,255,255,.45); width: 14px; text-align: center; font-size: .78rem; }
.footer-badge:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 11px; }
.footer-links a {
    color: rgba(255,255,255,.7); text-decoration: none; font-size: .92rem;
    display: inline-flex; align-items: center; gap: 9px;
    transition: color .22s var(--ease), transform .22s var(--ease);
}
.footer-links a:hover { color: #fff; transform: translateX(5px); }
.footer-links i { font-size: .68rem; opacity: .6; }
.footer-contact-item { display: flex; gap: 14px; margin-bottom: 16px; text-decoration: none; }
.footer-contact-icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm);
    background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff;
    font-size: 1.05rem; transition: all .3s var(--ease);
}
.footer-contact-item:hover .footer-contact-icon { background: var(--accent); transform: scale(1.06); }
.footer-contact-text strong { display: block; color: #fff; font-size: .92rem; }
.footer-contact-text span   { color: rgba(255,255,255,.68); font-size: .88rem; }
.footer-newsletter-form { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.footer-newsletter-form input {
    flex: 1; min-width: 160px; padding: 12px 18px; border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.09); color: #fff;
    transition: all .25s var(--ease);
}
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,.48); }
.footer-newsletter-form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.16); }
.footer-newsletter-form button {
    padding: 12px 24px; background: #fff; color: #1a3a5c; border: none;
    border-radius: var(--radius-full); font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: all .28s var(--ease);
}
.footer-newsletter-form button:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.footer-msg { font-size: .84rem; margin-top: 10px; min-height: 20px; }
.footer-msg.ok { color: #6ee7b7; }
.footer-msg.err { color: #fca5a5; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.1); color: #fff; text-decoration: none; font-size: 1rem;
    transition: all .32s var(--ease-spring);
}
.footer-social a:hover { background: var(--accent); transform: translateY(-3px); }
.footer-bottom-bar {
    border-top: 1px solid rgba(255,255,255,.16); padding: 26px 0;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px; position: relative; z-index: 2;
}
.footer-bottom-bar p { color: rgba(255,255,255,.75); font-size: .88rem; }
.footer-bottom-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom-links a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .87rem; transition: color .2s var(--ease); }
.footer-bottom-links a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   22. MODALS & FORMULIEREN
   ========================================================================== */
.popup-overlay {
    position: fixed; inset: 0; z-index: 11000; display: none;
    background: var(--overlay-bg); backdrop-filter: blur(10px);
    justify-content: center; align-items: flex-start; padding: 5vh 20px;
    opacity: 0; transition: opacity .3s var(--ease); overflow-y: auto;
}
.popup-overlay.active { display: flex; opacity: 1; }
.popup-container {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl); width: 100%; max-width: 640px;
    box-shadow: var(--shadow-xl); animation: modalIn .42s var(--ease-out);
    margin: auto; overflow: hidden;
}
.popup-container.wide { max-width: 860px; }
.popup-header {
    padding: 24px 28px; border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    background: var(--card-bg);
}
.popup-header h2 { font-size: 1.34rem; font-weight: 800; letter-spacing: -.028em; }
.popup-header p  { font-size: .87rem; color: var(--text-secondary); margin-top: 3px; }
.popup-close {
    background: var(--bg-tertiary); border: none; cursor: pointer; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem;
    color: var(--text-secondary); transition: all .3s var(--ease);
}
.popup-close:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }
.popup-body { padding: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 640; margin-bottom: 8px; font-size: .9rem; }
.form-group label .req { color: var(--danger); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
    border: 2px solid var(--border-color); background: var(--bg-primary);
    font-size: .95rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--accent-line); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow);
}
.form-group textarea { resize: vertical; min-height: 110px; line-height: 1.65; }
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--danger); }
.field-error { display: none; color: var(--danger); font-size: .82rem; margin-top: 6px; font-weight: 600; }
.form-group.invalid .field-error { display: block; animation: shakeX .4s var(--ease); }

.checkbox-line { display: flex; align-items: flex-start; gap: 11px; font-size: .87rem; color: var(--text-secondary); line-height: 1.6; }
.checkbox-line input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.checkbox-line a { color: var(--accent); }

.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; width: 0 !important; }

.form-status { margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; display: none; }
.form-status.show { display: flex; align-items: flex-start; gap: 11px; animation: fadeUp .4s var(--ease-out); }
.form-status.ok  { background: rgba(15,157,110,.1);  color: var(--success); border: 1px solid rgba(15,157,110,.28); }
.form-status.err { background: rgba(220,38,38,.08); color: var(--danger);  border: 1px solid rgba(220,38,38,.24); }

.spinner {
    width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: spin .7s linear infinite; display: none;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn-label { opacity: .7; }

/* Succesweergave na verzenden */
.success-panel { text-align: center; padding: 26px 10px; }
.success-check {
    width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(15,157,110,.12);
    color: var(--success); font-size: 2.1rem; animation: popIn .5s var(--ease-spring);
}
.success-panel h3 { font-size: 1.42rem; font-weight: 810; letter-spacing: -.03em; margin-bottom: 10px; }
.success-panel p  { color: var(--text-secondary); line-height: 1.75; margin-bottom: 8px; }
.success-ref {
    display: inline-block; margin-top: 14px; padding: 10px 22px;
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-full); font-weight: 800; letter-spacing: .06em;
}

/* ==========================================================================
   23. CHAT
   ========================================================================== */
.live-chat-panel {
    position: fixed; bottom: 22px; right: 24px; z-index: 999;
    width: 420px; max-width: 92vw; height: 560px; max-height: 78vh;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(28px) scale(.96); transform-origin: bottom right;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .42s var(--ease-spring), opacity .32s var(--ease), visibility .32s;
}
.live-chat-panel.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
.live-chat-panel-header {
    background: var(--accent);
    color: #fff; padding: 17px 20px; display: flex; align-items: center;
    justify-content: space-between; gap: 14px; position: relative; overflow: hidden;
}

.live-chat-header-left { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.chat-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    background: var(--avatar-bg); border: 2px solid rgba(255,255,255,.28); flex-shrink: 0;
}
.chat-header-title { font-size: 1rem; font-weight: 780; letter-spacing: -.02em; }
.chat-header-sub { font-size: .8rem; opacity: .86; display: flex; align-items: center; gap: 7px; }
.chat-header-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7; animation: pulseDot 2.2s infinite; }
.live-chat-panel-close {
    background: rgba(255,255,255,.15); border: none; color: #fff; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%; font-size: .95rem;
    position: relative; z-index: 2; transition: all .28s var(--ease); flex-shrink: 0;
}
.live-chat-panel-close:hover { background: rgba(255,255,255,.3); }

.live-chat-panel-body {
    flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column;
    gap: 14px; background: var(--chat-body-bg); scroll-behavior: smooth;
}
.chat-message { display: flex; gap: 11px; align-items: flex-end; animation: msgIn .4s var(--ease-out); }
.chat-message.user { flex-direction: row-reverse; }
.chat-message .chat-avatar { width: 34px; height: 34px; border-width: 0; }
.chat-bubble {
    max-width: 76%; padding: 12px 15px; display: grid; gap: 5px;
    font-size: .91rem; line-height: 1.6; word-break: break-word;
}
.chat-message.bot .chat-bubble {
    background: var(--card-bg); color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 4px;
    box-shadow: var(--shadow-xs);
}
.chat-message.user .chat-bubble {
    background: var(--accent);
    color: #fff; border-radius: var(--radius-sm) var(--radius-sm) 4px var(--radius-sm);
    box-shadow: var(--shadow-accent);
}
.chat-author { font-size: .74rem; font-weight: 750; color: var(--text-muted); }
.chat-time { font-size: .68rem; opacity: .55; text-align: right; }
.faq-actions { display: grid; gap: 8px; margin-top: 4px; }
.faq-actions button {
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-primary); border-radius: var(--radius-sm);
    padding: 10px 15px; cursor: pointer; font-size: .87rem; text-align: left;
    font-weight: 550; transition: all .22s var(--ease);
}
.faq-actions button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.typing-indicator .chat-bubble { display: flex; align-items: center; gap: 5px; padding: 15px 17px; }
.typing-indicator .chat-bubble i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary);
    opacity: .4; animation: typingBounce 1.4s infinite;
}
.typing-indicator .chat-bubble i:nth-child(2) { animation-delay: .2s; }
.typing-indicator .chat-bubble i:nth-child(3) { animation-delay: .4s; }

.live-chat-panel-footer { padding: 14px 16px; border-top: 1px solid var(--border-color); background: var(--bg-primary); }
.chat-input-row { display: flex; gap: 9px; align-items: center; }
.chat-input-row input {
    flex: 1; padding: 13px 17px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    font-size: .93rem; transition: all .25s var(--ease);
}
.chat-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.chat-input-row button {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    display: grid; place-items: center; transition: background-color .25s var(--ease);
}
.chat-input-row button:hover:not(:disabled) { background: var(--accent-hover); }
.chat-input-row button:disabled { opacity: .5; cursor: not-allowed; }
.chat-foot-note { font-size: .72rem; color: var(--text-muted); text-align: center; margin-top: 9px; font-weight: 550; }

/* ==========================================================================
   24. COOKIES
   ========================================================================== */
.cookie-popup {
    position: fixed; bottom: 22px; left: 50%; z-index: 9999;
    width: min(94%, 600px);
    background: var(--popup-bg); border: 1px solid var(--popup-border);
    border-radius: var(--radius-lg); padding: 22px 24px;
    box-shadow: var(--shadow-xl); backdrop-filter: blur(20px);
    transform: translateX(-50%) translateY(30px) scale(.96); transform-origin: bottom center;
    opacity: 0; pointer-events: none;
    transition: transform .45s var(--ease-spring), opacity .35s var(--ease);
}
.cookie-popup.active { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.cookie-popup::before {
    content: var(--cookie-tag, 'Cookie-instellingen'); position: absolute; top: -11px; left: 22px;
    background: var(--popup-tag-bg); color: var(--accent);
    font-size: .72rem; font-weight: 750; padding: 5px 13px;
    border-radius: var(--radius-full); border: 1px solid var(--popup-border);
}
.cookie-popup p { color: var(--text-secondary); font-size: .91rem; line-height: 1.7; margin-bottom: 14px; }
.cookie-popup p strong { color: var(--text-primary); }
.cookie-cats { display: grid; gap: 9px; margin-bottom: 16px; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out), margin .3s var(--ease); }
.cookie-popup.expanded .cookie-cats { max-height: 340px; }
.cookie-cat {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
    background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: .87rem;
}
.cookie-cat strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.cookie-cat span { color: var(--text-secondary); line-height: 1.55; }
.cookie-switch { position: relative; flex-shrink: 0; margin-left: auto; }
.cookie-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; cursor: pointer; z-index: 2; margin: 0; }
.cookie-switch i {
    display: block; width: 44px; height: 24px; border-radius: 99px;
    background: var(--border-color); transition: background-color .3s var(--ease); position: relative;
}
.cookie-switch i::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);
    transition: transform .32s var(--ease-spring);
}
.cookie-switch input:checked + i { background: var(--accent); }
.cookie-switch input:checked + i::after { transform: translateX(20px); }
.cookie-switch input:disabled + i { opacity: .55; }
.cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cookie-btn {
    padding: 12px 22px; border-radius: var(--radius-full); border: none;
    cursor: pointer; font-weight: 700; font-size: .91rem; transition: all .28s var(--ease);
}
.cookie-btn.accept { background: var(--accent); color: #fff; flex: 1; min-width: 140px; box-shadow: var(--shadow-accent); }
.cookie-btn.accept:hover { background: var(--accent-hover); transform: translateY(-2px); }
.cookie-btn.save { background: var(--bg-tertiary); color: var(--text-primary); }
.cookie-btn.save:hover { background: var(--accent-soft); color: var(--accent); }
.cookie-btn.decline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.cookie-btn.decline:hover { background: var(--bg-tertiary); }
.cookie-toggle-link { background: none; border: none; color: var(--accent); font-weight: 650; font-size: .86rem; cursor: pointer; text-decoration: underline; padding: 0; }

/* ==========================================================================
   25. ZWEVENDE KNOPPEN
   ========================================================================== */
.floating-actions {
    position: fixed; bottom: 24px; right: 24px; z-index: 997;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
/* De open chatpanel dekt de knoppen af — dan verbergen we ze even */
body.chat-open .floating-actions { opacity: 0; pointer-events: none; transform: translateY(14px); }
@media (max-width: 480px) {
    body.chat-open .floating-actions { opacity: 1; pointer-events: auto; transform: none; }
}
.floating-item { display: flex; align-items: center; justify-content: flex-end; position: relative; }
.floating-label {
    background: var(--card-bg); border: 1px solid var(--border-color);
    padding: 8px 15px; border-radius: var(--radius-full); font-size: .84rem;
    font-weight: 600; color: var(--text-primary); box-shadow: var(--shadow-sm);
    white-space: nowrap; margin-right: 10px; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translateX(12px) scale(.9);
    transition: all .32s var(--ease-spring);
}
.floating-item:hover .floating-label { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }
.floating-btn {
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    display: grid; place-items: center; font-size: 1.22rem; color: #fff;
    box-shadow: var(--shadow-md); flex-shrink: 0; position: relative;
    transition: transform .32s var(--ease-spring), box-shadow .3s var(--ease), background-color .28s var(--ease);
}
.floating-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.floating-btn:active { transform: scale(.95); }
.whatsapp-btn { background: #25d366; }
.whatsapp-btn:hover { background: #1eb855; }
.live-chat-btn { background: var(--accent); }
.live-chat-btn:hover { background: var(--accent-hover); }
.chat-badge {
    position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff;
    font-size: .68rem; font-weight: 800; display: grid; place-items: center;
    border: 2px solid var(--bg-primary); animation: popIn .4s var(--ease-spring);
}
.theme-btn { background: #64748b; }
.theme-btn:hover { background: #475569; }

.scroll-btn { background: var(--accent); opacity: 0; visibility: hidden; pointer-events: none; }
.scroll-btn.visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* Preloader */
.preloader {
    position: fixed; inset: 0; z-index: 20000; background: var(--bg-primary);
    display: grid; place-items: center; transition: opacity .55s var(--ease), visibility .55s;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; }
.preloader-blob {
    width: 74px; height: 74px; margin: 0 auto 20px;
    background: linear-gradient(145deg, var(--blue-blob-1), var(--blue-blob-3));
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
    animation: blobMorphA 2.4s ease-in-out infinite, spin 4s linear infinite;
    box-shadow: 0 16px 40px var(--accent-glow);
}
.preloader-text { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }

/* ==========================================================================
   26. RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
    .hero .container { gap: 24px; }
    .hero-visual { min-height: 500px; }
    .calc-wrap { grid-template-columns: 1fr; }
    .calc-result { position: static; }
    .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
    .faq-aside { position: static; }
    .gebied-wrap { grid-template-columns: 1fr; gap: 34px; }
    .review-card { flex: 0 0 calc((100% - 22px) / 2); }
    .footer-grid-main { grid-template-columns: 1.4fr 1fr 1.2fr; }
    .footer-col:nth-child(3) { display: none; }
}

@media (max-width: 980px) {
    .contact-wrap { grid-template-columns: 1fr; }
    .contact-info-grid { grid-template-columns: 1fr 1fr; }
    .lightbox-inner { grid-template-columns: 1fr; max-height: 88vh; overflow-y: auto; }
    .lightbox-img { max-height: 46vh; min-height: 220px; }
    /* Op een smal scherm draait het om de foto: de rij miniaturen schuift
       direct onder de foto, de toelichting komt daaronder. */
    .lightbox-body { padding: 20px 20px 24px; display: flex; flex-direction: column; }
    /* Niets mag ingedrukt worden: anders schuift de specificatietabel
       onder de knop door. */
    .lightbox-body > * { flex: 0 0 auto; }
    .lightbox-strip { order: -1; margin: 0 0 18px; }
    .lightbox-body h3 { font-size: 1.24rem; margin: 10px 0 10px; }
    .lightbox-body p  { font-size: .92rem; margin-bottom: 18px; }
    .lightbox-specs   { margin-bottom: 18px; }
    .dienst-pair { grid-template-columns: 1fr; gap: 20px; }
    .dienst-pair .dienst-visuals { order: -1; }
    .dienst-mini-visual { min-height: 260px; }
}

@media (max-width: 900px) {
    :root { --header-height: 72px; }
    .mobile-menu-btn { display: block; }
    nav {
        position: fixed; top: var(--header-height); left: 0; width: 100%;
        height: calc(100dvh - var(--header-height));
        background: var(--bg-primary); padding: 26px 6% 60px;
        overflow-y: auto; z-index: 999;
        transform: translateX(100%); transition: transform .42s var(--ease-out);
        display: block;
    }
    nav.open { transform: translateX(0); }
    .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
    .nav-list > li > a { padding: 15px 18px; font-size: 1.05rem; border-radius: var(--radius-md); justify-content: space-between; }
    .nav-list > li > a.active::after { display: none; }
    .mega {
        position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        width: 100%; max-width: none; box-shadow: none; border: none; background: transparent;
        padding: 4px 0 10px; grid-template-columns: 1fr; max-height: 0; overflow: hidden;
        transition: max-height .4s var(--ease-out);
    }
    .mega::before { display: none; }
    .nav-list .has-drop.open .mega { max-height: 620px; }
    .nav-list .has-drop:hover .mega { max-height: 0; }
    .nav-list .has-drop.open:hover .mega { max-height: 620px; }
    .mega-item { padding: 12px 16px; }
    .mega-foot { display: none; }
    .nav-list > li { width: 100%; }
    .nav-list > li > a.nav-phone {
        display: flex; width: 100%; justify-content: center;
        margin-top: 16px; padding: 15px; font-size: 1rem;
    }
    .nav-list > li > a.nav-cta {
        display: flex; width: 100%; justify-content: center;
        margin-top: 10px; padding: 16px !important; font-size: 1rem;
    }

    .hero { min-height: auto; padding-block: 34px 56px; }
    .hero .container { grid-template-columns: 1fr; gap: 26px; }
    .hero-visual { min-height: 400px; order: -1; }
    .hero-blob-left  { width: min(300px, 62vw); left: 6%; }
    .hero-blob-right { width: min(215px, 45vw); left: 38%; }
    .hero-worker-img { width: min(340px, 76vw); max-height: 400px; }
    .hero-card { padding: 11px 15px; }
    .hero-card.c1 { top: 0; left: -1%; }
    .hero-card.c2 { bottom: 6%; right: -1%; }
    .hero-card.c3 { display: none; }
    .hero-scroll { display: none; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .stat-item:nth-child(2)::after { display: none; }

    .review-card { flex: 0 0 100%; }
    .timeline-item { padding-left: 68px; }
    .timeline-dot { width: 52px; height: 52px; font-size: 1.05rem; }
    .timeline::before, .timeline-progress { left: 25px; }
    .timeline-duur { margin-left: 0; }
    .footer-grid-main { grid-template-columns: 1fr 1fr; }
    .footer-col:nth-child(3) { display: block; }
}

@media (max-width: 620px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .cta-buttons .btn, .hero-buttons .btn { width: 100%; }
    .footer-grid-main { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom-bar { flex-direction: column; text-align: center; }
    .popup-body { padding: 22px 20px; }
    .popup-header { padding: 20px; }
    .calc-body { padding: 22px 18px; }
    .calc-nav { padding: 16px 18px; }
    .stats-band { grid-template-columns: repeat(2, 1fr); }
    .lightbox { padding: 16px 12px; }
    .lightbox-body { padding: 24px 20px; }
    .lightbox-nav { display: none; }
}

@media (max-width: 480px) {
    .live-chat-panel { width: 94vw; right: 3vw; bottom: 86px; height: 70dvh; }
    .cookie-popup { bottom: 12px; padding: 18px; }
    .floating-actions { right: 14px; bottom: 16px; gap: 9px; }
    .floating-btn { width: 46px; height: 46px; font-size: 1.08rem; }
    .floating-label { display: none; }
    .hero-card { padding: 10px 13px; }
    .hero-card strong { font-size: .82rem; }
    .hero-card span { font-size: .72rem; }
    .option-grid { grid-template-columns: 1fr; }
}

/* Printen */
@media print {
    header, .floating-actions, .live-chat-panel, .cookie-popup, .preloader,
    .scroll-progress, .hero-scroll, .cta-banner-wrapper { display: none !important; }
    body { padding-top: 0; background: #fff; color: #000; }
    body::before { display: none; }
    .tilted::before, .tilted::after { display: none; }
    section { break-inside: avoid; }
}

/* ==========================================================================
   27. NIEUWE ONDERDELEN — rolbadges, klassekaarten, voorbeelden, meewerken
   ========================================================================== */

/* --- Labels bij een dienst: doe ik zelf / in opbouw / via partner --- */
.dienst-labels { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 13px; }
.dienst-text-item .zone-badge { margin-bottom: 0; }

.rol-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: var(--radius-full);
    font-size: .76rem; font-weight: 700; letter-spacing: .01em;
    border: 1px solid transparent; white-space: nowrap;
}
.rol-badge i { font-size: .72rem; }
.rol-eigen   { background: rgba(15,157,110,.11); color: var(--success); border-color: rgba(15,157,110,.26); }
.rol-opbouw  { background: rgba(217,119,6,.11);  color: var(--warning); border-color: rgba(217,119,6,.26); }
.rol-partner { background: var(--bg-tertiary);   color: var(--text-secondary); border-color: var(--border-color); }

/* --- Afwerkingsklassen --- */
.klasse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.klasse-card {
    position: relative; overflow: hidden;
    background: var(--card-bg); border: 2px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 24px 22px;
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.klasse-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.klasse-card.aanbevolen { border-color: var(--accent); box-shadow: 0 10px 34px var(--accent-glow); }
.klasse-card.aanbevolen::before {
    content: 'Meest gekozen'; position: absolute; top: 14px; right: 14px;
    background: var(--accent); color: #fff; font-size: .65rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--radius-full);
    box-shadow: 0 4px 12px var(--accent-glow);
}
.klasse-card.aanbevolen .klasse-top { padding-right: 118px; }
.klasse-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.klasse-letter {
    font-size: 2.6rem; font-weight: 880; line-height: 1; letter-spacing: -.05em;
    color: var(--accent);
}
.klasse-kort { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.klasse-card h3 { font-size: 1.08rem; font-weight: 770; margin-bottom: 10px; letter-spacing: -.02em; }
.klasse-card > p { color: var(--text-secondary); font-size: .89rem; line-height: 1.68; margin-bottom: 16px; }
.klasse-meter { height: 6px; border-radius: 99px; background: var(--bg-tertiary); overflow: hidden; margin-bottom: 7px; }
.klasse-meter i {
    display: block; height: 100%; width: 0; border-radius: 99px;
    background: var(--accent);
    transition: width 1.1s var(--ease-out);
}
.klasse-meter-label { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-muted); margin-bottom: 16px; }
.klasse-list { list-style: none; display: grid; gap: 8px; }
.klasse-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--text-secondary); }
.klasse-list i { color: var(--success); margin-top: 4px; font-size: .74rem; flex-shrink: 0; }

.klasse-tip {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 26px; padding: 20px 24px;
    background: var(--card-bg); border: 1px solid var(--accent-line);
    border-left: 4px solid var(--accent); border-radius: var(--radius-md);
}
.klasse-tip > i { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }
.klasse-tip p { flex: 1; min-width: 240px; margin: 0; font-size: .91rem; line-height: 1.7; color: var(--text-secondary); }
.klasse-tip strong { color: var(--text-primary); }

/* --- Voorbeeldkaarten (als er nog geen eigen projecten zijn) --- */
.voorbeeld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voorbeeld-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.voorbeeld-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.voorbeeld-card.aanbevolen { border-color: var(--accent); }
.voorbeeld-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-tertiary); }
.voorbeeld-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.voorbeeld-card:hover .voorbeeld-thumb img { transform: scale(1.06); }
.voorbeeld-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(6,12,28,.55), transparent 55%);
}
.voorbeeld-letter {
    position: absolute; left: 16px; bottom: 14px; z-index: 2;
    font-size: 2.6rem; font-weight: 880; line-height: 1; color: #fff;
    letter-spacing: -.05em; text-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.voorbeeld-tip {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    background: var(--accent); color: #fff; padding: 5px 13px;
    border-radius: var(--radius-full); font-size: .7rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
}
.voorbeeld-info { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.voorbeeld-info h3 { font-size: 1.04rem; font-weight: 760; margin-bottom: 8px; letter-spacing: -.02em; }
.voorbeeld-info p { color: var(--text-secondary); font-size: .88rem; line-height: 1.66; flex: 1; }
.voorbeeld-voor {
    display: inline-flex; align-items: flex-start; gap: 8px; margin-top: 15px; padding-top: 14px;
    border-top: 1px solid var(--border-color); font-size: .83rem; color: var(--accent); font-weight: 650;
}
.voorbeeld-voor i { margin-top: 4px; font-size: .72rem; }

/* --- Kleine noot onder een sectie --- */
.sectie-noot {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-top: 26px; text-align: center;
    font-size: .87rem; color: var(--text-muted);
}
.sectie-noot i { color: var(--accent); }
.sectie-noot a { color: var(--accent); font-weight: 650; }
.sectie-noot code {
    background: var(--bg-tertiary); padding: 2px 7px; border-radius: 6px;
    font-size: .84em; color: var(--text-secondary);
}

/* --- Meewerken --- */
/* Vier rollen, dus twee kolommen: dat geeft een net blok van 2 × 2. Met
   auto-fit werden het er drie en bleef de vierde kaart alleen op de
   onderste rij staan. */
.meewerk-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .meewerk-grid { grid-template-columns: repeat(2, 1fr); } }
.meewerk-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 26px 24px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    transition: transform .38s var(--ease-out), box-shadow .38s var(--ease), border-color .3s var(--ease);
}
.meewerk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
/* De knop naar de onderkant, zodat hij in beide kaarten van een rij op
   dezelfde hoogte staat, ook als de ene tekst langer is dan de andere. */
.meewerk-card > .btn { margin-top: auto; }
.meewerk-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
    font-size: 1.15rem; transition: all .4s var(--ease-spring);
}
.meewerk-card:hover .meewerk-icon { background: var(--accent); color: #fff; }
.meewerk-card h3 { font-size: 1.06rem; font-weight: 760; letter-spacing: -.02em; }
.meewerk-card p { color: var(--text-secondary); font-size: .89rem; line-height: 1.68; flex: 1; }
.meewerk-card .vac-tags { margin-bottom: 4px; }
.meewerk-info {
    font-size: .82rem; font-weight: 600; color: var(--text-secondary);
    margin: 0 0 4px; line-height: 1.5;
}

/* --- Reviews: bij 1 of 2 gewoon naast elkaar, geen slider --- */
.reviews-viewport.statisch { overflow: visible; }
.reviews-track.statisch {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px; transform: none !important;
}
.reviews-track.statisch .review-card { flex: initial; min-width: 0; }

/* --- Kleine tekstjes --- */
.kaart-kop { font-size: 1.14rem; font-weight: 780; letter-spacing: -.025em; margin-bottom: 5px; }
.kaart-sub { color: var(--text-secondary); font-size: .89rem; margin-bottom: 20px; }
.tijden-noot { margin-top: 12px; font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
.success-panel p.klein { font-size: .86rem; color: var(--text-muted); }
.calc-samenvatting-kop { font-size: .94rem; opacity: .84; line-height: 1.65; margin: 10px 0 18px; }
.calc-overzicht {
    padding: 13px 16px; background: var(--accent-soft); border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm); font-size: .88rem; color: var(--accent);
    font-weight: 640; line-height: 1.7;
}
.openingstijden h3 { font-size: .96rem; font-weight: 750; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.portfolio-info h3 { font-size: 1.05rem; font-weight: 760; margin-bottom: 7px; letter-spacing: -.02em; line-height: 1.32; }
.timeline-item h3 { font-size: 1.05rem; font-weight: 760; letter-spacing: -.02em; }
.footer-col h3 {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .13em;
    color: #fff; margin-bottom: 20px; font-weight: 750;
}
.cta-banner h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); font-weight: 840; letter-spacing: -.03em; margin-bottom: 13px; text-wrap: balance; }

/* --- Responsive voor het nieuwe spul --- */
@media (max-width: 1000px) {
    .klasse-grid, .voorbeeld-grid { grid-template-columns: 1fr 1fr; }
    .klasse-card.aanbevolen, .voorbeeld-card.aanbevolen { grid-column: span 2; }
    .klasse-card.aanbevolen .klasse-list { grid-template-columns: 1fr 1fr; display: grid; }
}
@media (max-width: 700px) {
    .klasse-grid, .voorbeeld-grid { grid-template-columns: 1fr; }
    .klasse-card.aanbevolen, .voorbeeld-card.aanbevolen { grid-column: span 1; }
    .klasse-card.aanbevolen .klasse-list { grid-template-columns: 1fr; }
    .klasse-tip { flex-direction: column; align-items: flex-start; gap: 12px; }
    .klasse-tip .btn { width: 100%; }
}

/* ==========================================================================
   28. CERTIFICERINGEN (VCA, VOG en overige papieren)
   ========================================================================== */
.cert-sectie { background: var(--bg-secondary); }

.cert-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-bottom: 0;
}
.cert-card {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 24px 22px; text-align: left;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: transform .38s var(--ease-out), box-shadow .38s var(--ease), border-color .3s var(--ease);
}
.cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }

.cert-merk {
    flex-shrink: 0; width: 72px; height: 72px;
    display: grid; place-items: center;
    color: var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.cert-card:hover .cert-merk { background: var(--accent); color: #fff; }
.cert-merk svg { width: 50px; height: 50px; display: block; }

/* Eigen logo geüpload? Dan geen gekleurd vlak eromheen. */
.cert-merk.heeft-logo {
    background: transparent; border-color: transparent;
    width: 84px; height: 72px;
}
.cert-card:hover .cert-merk.heeft-logo { background: transparent; }
.cert-merk.heeft-logo img { max-width: 100%; max-height: 66px; object-fit: contain; }

.cert-tekst { min-width: 0; }
.cert-code {
    display: inline-block; font-size: .7rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 5px;
}
.cert-card h3 { font-size: 1.02rem; font-weight: 760; margin-bottom: 7px; letter-spacing: -.02em; }
.cert-card p  { font-size: .88rem; color: var(--text-secondary); line-height: 1.66; }

.cert-voetnoot {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 24px; font-size: .86rem; color: var(--text-muted); text-align: center;
}
.cert-voetnoot i { color: var(--accent); }

@media (max-width: 1000px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  {
    .cert-grid { grid-template-columns: 1fr; }
    .cert-card { padding: 20px 18px; gap: 15px; }
    .cert-merk { width: 60px; height: 60px; }
    .cert-merk svg { width: 42px; height: 42px; }
}

/* ==========================================================================
   29. MEER KLEUR IN DE LICHTE MODUS
   Blauwe lijnen, accenten en zachte vlakken — in donker blijft alles rustig.
   ========================================================================== */

/* Fijn technisch raster over de hele pagina, duidelijker dan voorheen */
body::before {
    background-image:
        linear-gradient(rgba(26, 86, 219, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 86, 219, .07) 1px, transparent 1px),
        linear-gradient(rgba(26, 86, 219, .11) 2px, transparent 2px),
        linear-gradient(90deg, rgba(26, 86, 219, .11) 2px, transparent 2px);
    background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
    opacity: 1;
    mask-image: none; -webkit-mask-image: none;
}
.dark-theme body::before, body.dark-theme::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .048) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, .048) 2px, transparent 2px);
}

/* Eén dunne accentlijn per rand, en die loopt mee met de schuine kant.
   (Vroeger stond hier een rechte lijn op de sectie zelf; die kruiste de
   schuine rand en dat gaf een dubbele streep.) */
.tilted { border-block: 0; }
/* De hero staat op z-index 1; zonder deze regel valt de schuine rand van de
   eerste grijze sectie achter de hero en zie je de lijn daar niet. */
.tilted { z-index: 1; }
.tilted::before { border-top: 1px solid var(--sectie-lijn); }
.tilted::after  { border-bottom: 1px solid var(--sectie-lijn); }

/* De hero krijgt een zachte blauwe wash + diagonale lijnen */
.hero {
    background:
        linear-gradient(180deg, rgba(26,86,219,.04) 0%, transparent 45%),
        radial-gradient(ellipse 80% 55% at 82% 40%, rgba(26,86,219,.09), transparent 62%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.dark-theme .hero {
    background:
        radial-gradient(ellipse 80% 55% at 82% 40%, rgba(109,155,245,.07), transparent 62%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.hero-deco {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
    background-image: repeating-linear-gradient(
        115deg,
        rgba(26,86,219,.055) 0px, rgba(26,86,219,.055) 2px,
        transparent 2px, transparent 26px
    );
    mask-image: linear-gradient(100deg, #000 0%, transparent 42%);
    -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 42%);
}
.dark-theme .hero-deco { opacity: .30; }

/* Blauw streepje onder elke sectiekop */
.section-head .section-title { position: relative; padding-bottom: 14px; }
.section-head .section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 54px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.section-head.left .section-title::after { left: 0; transform: none; background: var(--accent); width: 44px; }

/* Kaarten krijgen een subtiele blauwe bovenrand die oplicht bij hover */
.usp-card, .cert-card, .meewerk-card, .voorbeeld-card, .klasse-card, .contact-form-card {
    position: relative;
}
.usp-card::after, .cert-card::after, .meewerk-card::after {
    content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
    background: var(--accent); border-radius: 0 0 3px 3px;
    transform: scaleX(0); transform-origin: center;
    transition: transform .45s var(--ease-out);
}
.usp-card:hover::after, .cert-card:hover::after, .meewerk-card:hover::after { transform: scaleX(1); }

/* Contactkaart en aanvraagpaneel krijgen een blauwe kopstreep. Het
   aanvraagpaneel heeft in plaats daarvan zijn eigen voortgangsbalk
   (.calc-voortgang hieronder), die meebeweegt met de stappen. */
.contact-form-card::before, .faq-aside::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--blue-blob-3));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.faq-aside { position: relative; }
.calc-panel { position: relative; }

/* Voortgangsbalk bovenin het aanvraagformulier: loopt mee van stap 1 t/m 5,
   met een bolletje per stap dat blauw wordt zodra die stap bereikt is. */
.calc-voortgang { position: relative; height: 4px; background: var(--border-color); }
.calc-voortgang-vulling {
    position: absolute; top: 0; left: 0; height: 100%; width: 20%;
    background: linear-gradient(90deg, var(--accent), var(--blue-blob-3));
    transition: width .45s var(--ease-out);
}
.calc-voortgang-punt {
    position: absolute; top: 50%; left: var(--pos, 10%);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--card-bg); border: 2px solid var(--border-color);
    transform: translate(-50%, -50%);
    transition: background .3s var(--ease-spring), border-color .3s var(--ease-spring), width .3s var(--ease-spring), height .3s var(--ease-spring);
    z-index: 1;
}
.calc-voortgang-punt[data-punt="0"] { --pos: 10%; }
.calc-voortgang-punt[data-punt="1"] { --pos: 30%; }
.calc-voortgang-punt[data-punt="2"] { --pos: 50%; }
.calc-voortgang-punt[data-punt="3"] { --pos: 70%; }
.calc-voortgang-punt[data-punt="4"] { --pos: 90%; }
.calc-voortgang-punt.bereikt { background: var(--accent); border-color: var(--accent); }
.calc-voortgang-punt.actief {
    width: 12px; height: 12px; background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* De zachte blauwe vlakken die hier vroeger per sectie stonden, zitten nu in
   de vaste achtergrondlaag (blok 35). Deze secties krijgen hun kleur gewoon
   van de om-en-om-regeling, net als alle andere. */

/* Pillen en tags iets blauwer */
.pill-list li { background: var(--accent-softer); border-color: var(--accent-line); color: var(--text-secondary); }
.vac-tags span { background: var(--accent-softer); border: 1px solid var(--accent-line); }
.gebied-steden span { background: var(--card-bg); border-color: var(--accent-line); }

/* Tijdlijn: gestippelde blauwe lijn in plaats van grijs */
.timeline::before {
    background-image: linear-gradient(var(--accent-line) 60%, transparent 0%);
    background-size: 2px 9px; background-repeat: repeat-y; background-color: transparent;
}

/* Logobalk: één dicht vlak.
   Eerder was het midden van deze balk doorzichtig; daardoor liep de schuine
   rand van de sectie eronder er dwars doorheen en zag je half raster, half
   grijs. De balk heeft nu een eigen dichte kleur en zijn eigen schuine
   bovenrand, zodat hij één geheel vormt met de sectie eronder. */
.logobar {
    background-color: var(--bg-secondary);
    background-image: linear-gradient(90deg, var(--accent-softer), transparent 32%, transparent 68%, var(--accent-softer));
    border-top: 0;
    border-bottom: 1px solid var(--accent-line);
    overflow: visible;
}
.logobar::after {
    content: '';
    position: absolute; left: 0;
    top: calc(var(--sky-rand) / -2);
    width: 100%; height: var(--sky-rand);
    background-color: var(--bg-secondary);
    /* De blauwe lijn loopt mee met de schuine rand */
    border-top: 1px solid var(--accent-line);
    transform: skewY(var(--sky-hoek));
    z-index: -1;
    pointer-events: none;
}
/* De marquee zelf houdt zijn eigen uitsnede */
.logobar .marquee { overflow: hidden; }

/* De sectie direct onder de balk hoeft geen tweede schuine rand of streep meer */
.logobar + section.tilted::before { display: none; }
.logobar + section.tilted { border-top: 0; }
.marquee-item { color: var(--text-secondary); opacity: .85; }
.marquee-item i { color: var(--accent); opacity: 1; }


/* ==========================================================================
   30. TAALKIEZER
   ========================================================================== */
.nav-list .has-taal { position: relative; }
.taal-knop {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; border-radius: var(--radius-full);
    border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-primary); font-weight: 650; font-size: .86rem;
    cursor: pointer; transition: all .25s var(--ease);
}
.taal-knop:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.taal-knop .chev { font-size: .62rem; transition: transform .3s var(--ease); }
.has-taal.open .taal-knop .chev { transform: rotate(180deg); }
.taal-vlag { display: inline-flex; align-items: center; line-height: 1; font-size: 1.05rem; }
.taal-vlag .vlag { display: block; width: 21px; height: 14px; border-radius: 2px; }

.taal-lijst {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
    min-width: 186px; padding: 7px; list-style: none;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .24s var(--ease), transform .24s var(--ease-out), visibility .24s;
}
.has-taal.open .taal-lijst { opacity: 1; visibility: visible; transform: translateY(0); }
.taal-lijst a {
    display: flex; align-items: center; gap: 11px; padding: 10px 13px;
    border-radius: var(--radius-sm); text-decoration: none;
    color: var(--text-primary); font-size: .9rem; font-weight: 550;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.taal-lijst a:hover { background: var(--accent-soft); color: var(--accent); }
.taal-lijst a.actief { color: var(--accent); font-weight: 700; background: var(--accent-softer); }
.taal-lijst a i { margin-left: auto; font-size: .72rem; }

/* E-mail in de balk */
.nav-mail {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    padding: 8px 14px; border-radius: var(--radius-full);
    border: 1px solid var(--accent-line); background: var(--accent-softer);
    color: var(--accent); font-weight: 650; font-size: .86rem;
    transition: all .25s var(--ease); white-space: nowrap;
}
.nav-mail:hover { background: var(--accent-soft); border-color: var(--accent); }
.nav-mail i { font-size: .82rem; }

/* Telefoonregel onder de heroknoppen */
.hero-tel { font-size: .9rem; color: var(--text-secondary); margin-bottom: 22px; }
.hero-tel a { color: var(--accent); font-weight: 700; text-decoration: none; }
.hero-tel a:hover { text-decoration: underline; }


/* ==========================================================================
   31. BIJLAGEN
   ========================================================================== */
.bijlage-veld { position: relative; }
.bijlage-veld input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
}
.bijlage-drop {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 22px 18px; text-align: center;
    border: 2px dashed var(--accent-line); border-radius: var(--radius-md);
    background: var(--accent-softer); color: var(--text-secondary); font-size: .9rem;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.bijlage-veld:hover .bijlage-drop,
.bijlage-veld.sleep .bijlage-drop { border-color: var(--accent); background: var(--accent-soft); }
.bijlage-drop i { font-size: 1.15rem; color: var(--accent); }
.bijlage-drop strong { color: var(--accent); }

.bijlage-lijst { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.bijlage-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: var(--radius-sm);
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    font-size: .87rem; animation: fadeUp .3s var(--ease-out);
}
.bijlage-item > i { color: var(--accent); flex-shrink: 0; }
.bijlage-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bijlage-grootte { color: var(--text-muted); font-size: .8rem; flex-shrink: 0; }
.bijlage-weg {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; font-size: .8rem; transition: all .2s var(--ease);
}
.bijlage-weg:hover { background: rgba(220,38,38,.1); color: var(--danger); }


/* ==========================================================================
   32. UITGELICHTE CONTACTTEGEL (e-mail voorop)
   ========================================================================== */
.contact-tile.uitgelicht {
    border-color: var(--accent); background: var(--accent-softer);
    box-shadow: 0 4px 16px var(--accent-glow);
    align-items: center;
}
.contact-tile.uitgelicht .ico { background: var(--accent); color: #fff; }
.contact-tile.uitgelicht strong { color: var(--accent); }
.tegel-noot { display: block; font-size: .8rem; color: var(--text-muted); margin-top: 3px; }
.tegel-pijl { margin-left: auto; color: var(--accent); transition: transform .3s var(--ease); }
.contact-tile.uitgelicht:hover .tegel-pijl { transform: translateX(4px); }

.faq-contactrow.uitgelicht {
    background: var(--accent-softer); border-radius: var(--radius-sm);
    padding: 15px 14px; margin-inline: -14px; border-top: none;
}
.faq-contactrow.uitgelicht i { background: var(--accent); color: #fff; }
.faq-contactrow .mini { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }


/* ==========================================================================
   33. RESPONSIVE AANVULLINGEN
   ========================================================================== */
@media (max-width: 1180px) {
    .nav-mail span { display: none; }
    .nav-mail { padding: 9px 12px; }
}
@media (max-width: 900px) {
    .nav-list > li.has-taal { width: 100%; }
    .taal-knop { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; }
    .taal-lijst {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; background: transparent; padding: 6px 0 0;
        max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out);
    }
    .has-taal.open .taal-lijst { max-height: 340px; }
    .nav-list > li > a.nav-mail {
        display: flex; width: 100%; justify-content: center; padding: 14px; font-size: .95rem;
    }
    .nav-mail span { display: inline; }
    .section-head .section-title { padding-bottom: 12px; }
}


/* ---- 34. VEILIGHEIDSREGEL ----------------------------------------------
   Sommige regels zetten display:flex op elementen die met het attribuut
   hidden verborgen horen te zijn. Deze regel wint altijd. */
[hidden] { display: none !important; }


/* ==========================================================================
   35. VASTE ACHTERGROND
   Eén laag die stil blijft staan. Alle inhoud schuift eroverheen.
   Deze laag is een echt element (<div class="page-bg">) in plaats van een
   pseudo-element: dat werkt in elke browser hetzelfde, ook op de telefoon.
   ========================================================================== */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background-color: var(--bg-primary);
}

/* Meescrollen in plaats van stilstaan? Zet thema.achtergrond_vast op false.
   De laag is dan zo hoog als de hele pagina en schuift gewoon mee omhoog,
   alsof het raster op het papier zelf gedrukt staat. Dit werkt doordat
   <body> op position: relative staat: daardoor rekent deze laag zijn hoogte
   af tegen de volledige pagina en niet tegen het zichtbare scherm. */
.page-bg.meescrollend {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto;
    min-height: 100%;
}

/* Bij een meescrollende achtergrond zijn de zachte blauwe vlakken bewust weg.
   Zolang de achtergrond stilstond zag je er altijd maar één scherm van; nu de
   laag met de pagina meeschuift zou je ze telkens opnieuw tegenkomen, en dat
   leest als vage schaduwvlekken over de secties heen. Er blijft één rustige
   waas bovenaan de pagina staan, verder alleen het raster. */
.page-bg.meescrollend::after {
    background: linear-gradient(180deg, rgba(26,86,219,.05), transparent 780px);
    background-repeat: no-repeat;
}
.dark-theme .page-bg.meescrollend::after,
body.dark-theme .page-bg.meescrollend::after {
    background: linear-gradient(180deg, rgba(109,155,245,.05), transparent 780px);
    background-repeat: no-repeat;
}

/* Het fijne bouwtekening-raster */
.page-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26, 86, 219, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 86, 219, .07) 1px, transparent 1px),
        linear-gradient(rgba(26, 86, 219, .11) 2px, transparent 2px),
        linear-gradient(90deg, rgba(26, 86, 219, .11) 2px, transparent 2px);
    background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
}

/* De zachte blauwe vlakken */
.page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 8% 12%,   rgba(26,86,219,.055), transparent 62%),
        radial-gradient(ellipse 50% 45% at 95% 78%,  rgba(26,86,219,.05),  transparent 62%),
        radial-gradient(ellipse 70% 40% at 50% 108%, rgba(26,86,219,.04),  transparent 65%);
}

.dark-theme .page-bg::before, body.dark-theme .page-bg::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .048) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, .048) 2px, transparent 2px);
}
.dark-theme .page-bg::after, body.dark-theme .page-bg::after {
    background:
        radial-gradient(ellipse 55% 45% at 8% 12%,  rgba(75,141,251,.10), transparent 62%),
        radial-gradient(ellipse 50% 45% at 95% 78%, rgba(75,141,251,.08), transparent 62%);
}

/* De oude achtergrondlagen op <body> zijn hierdoor overbodig */
body::before, body::after { display: none !important; }

/* De grijsblauwe secties met de schuine randen blijven een dichte, effen kleur:
   geen raster en niets dat erdoorheen schijnt. */
.tilted, .dark-theme .tilted, body.dark-theme .tilted {
    background-color: var(--bg-secondary);
    background-image: none;
}
.tilted::before, .tilted::after { background: var(--bg-secondary); }

/* De secties zelf hebben geen eigen achtergrond meer: het raster hoort door te
   lopen op de witte stukken. Alleen de grijze secties dekken hem af. */
main > section:not(.tilted):not(.hero) { background: transparent; }


/* ==========================================================================
   36. KAART VAN NEDERLAND
   De kaart is getekend op echte coördinaten (zie includes/secties/werkgebied.php).
   ========================================================================== */
/* De kaart vult zijn vak helemaal: het kader zit strak om Nederland heen, dus
   er gaat geen ruimte verloren aan lege lucht eromheen. Hij mag bovendien een
   stukje boven zijn eigen vak uitsteken en zo licht over de schuine sectielijn
   heen lopen — dat geeft diepte. overflow: visible zorgt dat dat mag. */
/* De kaart staat verticaal in het midden van de rij, dus even veel lucht boven
   als onder ten opzichte van de tekst, de pillen en het postcodevak ernaast. */
.gebied-wrap > *:last-child { align-self: center; }

.gebied-map svg.nl-kaart {
    width: 100%;
    max-width: 600px;
    /* Een klein zetje naar rechts, zodat de kaart wat losser van de tekst
       staat. Met 'left' verschuift alleen het beeld; de opmaak eromheen
       blijft precies waar hij is. */
    position: relative;
    left: 18px;
    /* Onder de kaart staat nog de legenda. Die telt mee bij het centreren,
       waardoor het kaartbeeld zelf net te hoog zou komen te staan. Deze marge
       is precies de hoogte van die legenda en zet dat weer recht: even veel
       lucht boven de kaart als eronder. */
    margin-top: 42px;
    overflow: visible;
}

/* De kaart steekt boven zijn eigen sectie uit. De secties ernaast zijn
   grijsblauwe 'tilted' secties die op z-index 1 staan — zonder deze regels
   leggen die zich over de kaart heen en snijden ze de bovenkant eraf.
   De sectie gaat omhoog in de stapeling, en de kaart binnen die sectie ook. */
#werkgebied { z-index: 3; }
.gebied-map { position: relative; z-index: 4; }

/* Het water ligt over de provincies heen (IJsselmeer, Zeeuwse stromen, de
   grote rivieren). Zou het de muis opvangen, dan valt de hover van de
   provincie eronder weg zodra je een waterrand raakt — en juist die randen
   lopen langs de provinciegrenzen. Vandaar: water vangt niets op. */
.nl-kaart .water {
    fill: var(--kaart-water, #b9d4f4);
    stroke: none;
    pointer-events: none;
}
/* Elke provincie is één groep. Zeeland en Flevoland bestaan uit meerdere
   stukken; die zitten in dezelfde groep en lichten dus samen op. */
.nl-kaart .prov {
    transition: fill .3s var(--ease), filter .3s var(--ease);
    cursor: pointer;
}
.nl-kaart .prov path {
    fill: inherit;
    stroke: var(--bg-primary); stroke-width: .9; stroke-linejoin: round;
    /* De grenslijn telt bewust mee voor de muis (de standaard). Zou alleen het
       vlak meetellen, dan valt er op elke provinciegrens een strookje van circa
       een pixel waar niets wordt geraakt: de hover flitst daar uit en weer aan.
       Met de lijn erbij sluiten de gevoelige vlakken naadloos op elkaar aan en
       gaat de kleur in één keer van de ene provincie naar de andere. */
    pointer-events: visiblePainted;
}
.nl-kaart .prov.actief { fill: var(--kaart-land, #cddcf7); }
.nl-kaart .prov.kern {
    fill: var(--accent);
    filter: drop-shadow(0 2px 5px rgba(26,86,219,.28));
}
/* Alleen de kleur verandert, de vorm blijft staan. Zou een provincie bij hover
   een paar pixels omhoogschuiven, dan glipt hij onder je cursor vandaan zodra
   je precies de grens raakt — en dan gaat de kaart bij elke grenslijn knipperen. */
.nl-kaart .prov:hover,
.nl-kaart .prov.kern:hover { fill: var(--accent-hover); transform: none; }

.nl-kaart .rivier {
    fill: none; stroke: var(--kaart-rivier, #7ba6ef); stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round; opacity: .85;
    pointer-events: none;
}
.nl-kaart .stad { fill: var(--text-secondary); opacity: .75; pointer-events: none; }
.nl-kaart .plaats-label {
    font-size: 6.4px; font-weight: 600; fill: var(--text-secondary);
    letter-spacing: .2px; pointer-events: none; paint-order: stroke;
    stroke: var(--bg-primary); stroke-width: 2px; stroke-linejoin: round;
}
.nl-kaart .plaats-label.thuis {
    font-size: 8.4px; font-weight: 800; fill: var(--accent-strong, var(--accent));
}
.nl-kaart .pin { fill: #fff; stroke: var(--accent); stroke-width: 2.2; pointer-events: none; }

/* Radarpuls bij de standplaats.
   transform-box: fill-box is hier de sleutel: zonder die regel rekent de
   browser het middelpunt uit over de héle tekening, en dan schuift de ring
   zijwaarts weg in plaats van netjes rond de stip uit te dijen. */
.nl-kaart .pulse-ring {
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    opacity: 0;
    /* De ringen dijen over de provincies uit. Zonder deze regel schuift er elke
       paar tellen een lijn onder de cursor door en verspringt de hover. */
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: mapRadar 3.6s cubic-bezier(.16, .84, .44, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .nl-kaart .pulse-ring { animation: none; opacity: .35; }
}

/* Legenda: het bolletje voor de standplaats */
.gebied-legend i.thuis {
    background: #fff; border: 2px solid var(--accent); border-radius: 50%;
}

/* In donkere modus wordt het land wat dieper en het water donkerder */
.dark-theme .nl-kaart, body.dark-theme .nl-kaart {
    --kaart-water: #191c22;
    --kaart-land:  #2b2f37;
    --kaart-rivier: #3c4653;
}

/* Vanaf 1180px staan de tekst en de kaart onder elkaar (zie het blok TABLET).
   Het zetje naar rechts heeft dan geen zin meer; hij hoort gewoon gecentreerd. */
@media (max-width: 1180px) {
    .gebied-map svg.nl-kaart { left: 0; max-width: 480px; }
}
@media (max-width: 980px) {
    .gebied-map svg.nl-kaart { max-width: 420px; }
}
@media (max-width: 640px) {
    .gebied-map svg.nl-kaart { max-width: 320px; }
    .nl-kaart .plaats-label { font-size: 7.4px; }
    .nl-kaart .plaats-label.thuis { font-size: 9.4px; }
}


/* ==========================================================================
   37. TELEFOON
   Alles wat op een klein scherm anders moet. Getest op 360, 390 en 430 px.
   ========================================================================== */

/* Niets mag horizontaal buiten beeld vallen — ook niet een halve pixel */
html { overflow-x: clip; }

/* Het uitschuifmenu telt niet meer mee zolang het dicht is */
@media (max-width: 900px) {
    nav { visibility: hidden; }
    nav.open { visibility: visible; }
}

@media (max-width: 640px) {

    /* --- De vier stappen van de aanvraagwizard passen nu naast elkaar ---
       Alleen bij de stap waar je bent staat het woord erbij. */
    .calc-steps { padding: 14px 12px; gap: 2px; overflow: visible; }
    .calc-step-tab {
        flex: 1 1 0; min-width: 0; justify-content: center;
        padding: 8px 6px; gap: 6px; font-size: .8rem;
    }
    .calc-step-tab .lbl { display: none; }
    .calc-step-tab.active .lbl {
        display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .calc-step-tab.active { flex: 2 1 0; }

    /* --- De zwevende knoppen wat kleiner, zodat ze minder afdekken --- */
    .floating-actions { bottom: 16px; right: 14px; gap: 9px; }
    .floating-btn { width: 46px; height: 46px; font-size: 1.05rem; }
    .floating-label { display: none; }

    /* De knoppenrij onderaan de wizard blijft vrij van de zwevende knoppen */
    .calc-nav { padding-right: 64px; }

    /* --- Het label "Meest gekozen" blijft binnen de kaart --- */
    .klasse-card.aanbevolen::before {
        top: 10px; right: 10px; font-size: .58rem; padding: 4px 9px;
    }
    .klasse-card.aanbevolen .klasse-top { padding-right: 96px; }

    /* --- Wat lucht eruit halen, anders wordt de pagina eindeloos lang --- */
    :root { --section-y: 56px; }
    .section-head { margin-bottom: 26px; }

    /* Tekst en knoppen prettig aantikbaar */
    .btn, .btn-sm { min-height: 46px; }
    .arrow-link { min-height: 42px; align-items: center; }

    /* Formuliervelden op 16px, anders zoomt iPhone in bij het tikken */
    input, select, textarea { font-size: 16px; }

    /* De kaart en de legenda passend */
    .gebied-legend { gap: 12px; font-size: .78rem; }
}

@media (max-width: 400px) {
    .calc-step-tab .n { width: 22px; height: 22px; font-size: .72rem; }
    .calc-step-tab.active .lbl { max-width: 112px; }
}

/* Ruimte voor de afgeronde hoeken en de balk onderin bij een iPhone */
@supports (padding: env(safe-area-inset-bottom)) {
    .floating-actions { bottom: calc(16px + env(safe-area-inset-bottom)); }
    .super-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   38. ZWEVEN ZONDER TRILLEN
   --------------------------------------------------------------------------
   Een kaart die bij hover een paar pixels omhoogspringt, glipt onder je cursor
   vandaan zodra je precies de onderrand raakt: hij zakt terug, komt weer onder
   de muis, en begint te trillen. Daarom groeit elke kaart hieronder evenveel
   als hij omhoogschuift. De onderrand blijft dus liggen waar hij lag terwijl
   de bovenkant omhoogkomt — hetzelfde effect, maar zonder getril.

   De extra ruimte schuift even langzaam mee als de sprong zelf; anders zou de
   kaart bij het loslaten alsnog onder de muis vandaan schieten.
   ========================================================================== */
.usp-card, .klasse-card, .meewerk-card, .cert-card,
.voorbeeld-card, .case-card, .review-card, .contact-tile {
    transition: transform .45s var(--ease-out),
                box-shadow .45s var(--ease),
                border-color .3s var(--ease),
                padding-bottom .45s var(--ease-out);
}
.usp-card:hover      { padding-bottom: 28px; }   /* 24 + 4 */
.klasse-card:hover   { padding-bottom: 28px; }   /* 24 + 4 */
.meewerk-card:hover  { padding-bottom: 30px; }   /* 26 + 4 */
.cert-card:hover     { padding-bottom: 32px; }   /* 28 + 4 */
.review-card:hover   { padding-bottom: 35px; }   /* 30 + 5 */
.contact-tile:hover  { padding-bottom: 25px; }   /* 22 + 3 */
.voorbeeld-card:hover{ padding-bottom: 4px; }
.case-card:hover     { padding-bottom: 10px; }

/* De twee fotoknoppen in het portfolio hebben geen ruimte om te groeien: daar
   blijft de knop stil staan en zoomt de foto zelf een klein beetje in. */
.project-hoofdfoto:hover { transform: none; }
.project-mini:hover      { transform: none; }
.project-mini img        { transition: transform .4s var(--ease-out); }
.project-mini:hover img  { transform: scale(1.08); }

/* ==========================================================================
   39. DE ACCENTLIJN BOVEN EEN KAART
   --------------------------------------------------------------------------
   Die lijn liep van hoek tot hoek, terwijl de kaart eronder ronde hoeken
   heeft. De uiteinden staken daardoor de lucht in en het leek een losse balk
   bóven de kaart te zweven. De lijn blijft nu binnen het rechte deel van de
   bovenrand en heeft zachte uiteinden.
   ========================================================================== */
.contact-form-card::before, .calc-panel::before, .faq-aside::before {
    left: var(--radius-xl);
    right: var(--radius-xl);
    border-radius: 3px;
}
.case-card::before {
    left: var(--radius-lg);
    right: var(--radius-lg);
    border-radius: 4px;
}


/* ==========================================================================
   40. AFBAKENING BIJ DE AFWERKINGSKLASSEN
   --------------------------------------------------------------------------
   Een smal bandje boven de drie klassekaarten dat vertelt waar A, B en C wél
   en niet over gaan. Zonder die afbakening leest de sectie alsof de klassen
   ook voor stucwerk, schilderwerk en montage gelden.
   ========================================================================== */
.klasse-scope {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    max-width: 860px; margin: 0 auto var(--space-6);
    padding: 16px 20px;
    border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-softer);
}
.klasse-scope p {
    flex: 1 1 320px; min-width: 0;
    color: var(--text-secondary); font-size: .92rem; line-height: 1.65; margin: 0;
}
.klasse-scope-label {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 6px 13px; border-radius: var(--radius-full);
    background: var(--accent); color: #fff;
    font-size: .76rem; font-weight: 700; letter-spacing: .03em;
}
.klasse-scope-label i { font-size: .78rem; }

@media (max-width: 620px) {
    .klasse-scope { flex-direction: column; gap: 12px; }
}


/* De tweede, rustiger verwijzing bij een dienst — bijvoorbeeld naar de uitleg
   over de afwerkingsklassen. Mag niet even hard roepen als "Aanvraag indienen". */
.arrow-link.zacht { color: var(--text-secondary); font-weight: 600; }
.arrow-link.zacht:hover { color: var(--accent); }
.arrow-link.zacht i { font-size: .78rem; opacity: .75; }
.arrow-link.zacht:hover i { transform: translateY(2px); }


/* ==========================================================================
   41. DE HERO — LAVALAMP EN DE REDEN OM TE KIEZEN
   --------------------------------------------------------------------------
   Dit blok komt ná de rest en overschrijft bewust een paar oudere regels.
   Twee dingen stonden hier eerder in de weg:

   1. De hero bestond uit twee vlakke, felblauwe cirkels op een bijna zwarte
      ondergrond. Overdag viel dat mee, 's avonds werd het neon — meer
      spelcomputer dan bouwbedrijf. De kleuren gaan in het donker daarom naar
      diep staalblauw met weinig verzadiging, en er ligt een fijne korrel
      overheen die het digitale eraf haalt.

   2. Er stond nergens waaróm iemand ons zou moeten bellen. Onder de hero
      staat nu een strook met drie harde argumenten.
   ========================================================================== */

:root {
    /* De drie kleuren van de lavalamp, van kern naar buitenrand. */
    --lava-1: #b7cdff;
    --lava-2: #5b88f2;
    --lava-3: #2450c4;
    --lava-dek: .80;
    --lava-schaduw: 0 26px 70px rgba(26, 86, 219, .18);
}
.dark-theme {
    /* Zelfde blauw als overdag: de klant wil geen aparte, grijzige dark-mode
       kleur voor de bellen, gewoon hetzelfde levendige blauw. */
    --lava-1: #b7cdff;
    --lava-2: #5b88f2;
    --lava-3: #2450c4;
    --lava-dek: .76;
    --lava-schaduw: 0 26px 80px rgba(0, 0, 0, .42);
}

/* --- de sectie zelf ------------------------------------------------------ */
.hero { padding-block: 44px 0; }
/* De hero maakt geen eigen stapelcontext meer. Deed hij dat wel, dan lag de
   hele sectie op één laag en verdween de waarom-strook onder de schuine rand
   van de sectie eronder. Nu telt de z-index van .container (2) rechtstreeks
   mee tegen die schuine rand (1), en steken de kaarten er netjes bovenuit. */
.hero { z-index: auto; }
/* Iets kleiner dan de rest van de sitekoppen: de kop telt hier vier woorden
   meer en mocht niet over vier regels vallen. */
.hero h1 { font-size: clamp(2rem, 3.35vw, 2.72rem); }
.hero .container {
    grid-template-columns: 1.04fr .96fr;
    gap: 30px 40px;
    align-items: center;
}
.dark-theme .hero {
    background:
        radial-gradient(ellipse 70% 50% at 78% 34%, rgba(109, 155, 245, .05), transparent 64%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
/* De diagonale streepjes waren in het donker het meest "technisch" van alles. */
.dark-theme .hero-deco { opacity: .14; }

/* Fijne korrel over de hele hero. Nauwelijks te zien, maar het haalt de
   vlakke digitale look van de kleurvlakken af. */
.hero-korrel {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .30; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");
}
.dark-theme .hero-korrel { opacity: .22; mix-blend-mode: overlay; }

/* --- de lavalamp -------------------------------------------------------- */
.hero-visual { min-height: 560px; }
.hero-lamp {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    isolation: isolate;
}

/* De lamp staat precies achter de figuur en is even hoog als zij. Eerder liep
   hij als kolom boven haar hoofd en onder haar voeten door; dat las als een
   veeg in plaats van als iets waar zij vóór staat. */
.lava {
    position: absolute; z-index: 1;
    width: min(122%, 565px); height: auto; aspect-ratio: 1;
    left: 50%; top: 47%; transform: translate(-50%, -50%);
    opacity: var(--lava-dek);
    filter: drop-shadow(var(--lava-schaduw));
    pointer-events: none;
}
/* Warme gloed achter de bellen. Staat los van de lamp, beweegt trager en
   veel breder — daardoor krijgt het donkere thema diepte zonder te schitteren. */
.lava-gloed {
    position: absolute; z-index: 0; pointer-events: none;
    width: min(132%, 640px); aspect-ratio: 1.02;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 46% 42%,
                color-mix(in srgb, var(--lava-1) 40%, transparent) 0%,
                color-mix(in srgb, var(--lava-2) 16%, transparent) 42%,
                transparent 70%);
    filter: blur(26px);
    opacity: .8;
    animation: gloedAdem 14s ease-in-out infinite;
}
.dark-theme .lava-gloed { opacity: .55; }

/* Schuin invallend licht over de bovenkant van de massa. */
.lava-glans {
    position: absolute; z-index: 2; pointer-events: none;
    width: min(62%, 320px); aspect-ratio: 1.1;
    left: 45%; top: 36%; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 34% 26%,
                rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 34%, transparent 62%);
    filter: blur(16px);
    mix-blend-mode: soft-light;
    opacity: .9;
}
.dark-theme .lava-glans { opacity: .24; width: min(48%, 250px); filter: blur(22px); }

/* Geldt voor elke bellenvorm op de pagina, groot en klein. */
.lava-stop-1 { stop-color: var(--lava-1); }
.lava-stop-2 { stop-color: var(--lava-2); }
.lava-stop-3 { stop-color: var(--lava-3); }
.lava .lava-groep  { fill: url(#lavaVerf); }

/* Elke bel beweegt om zijn eigen middelpunt; zonder fill-box rekent de browser
   dat uit over de héle tekening en zwiept de bel het beeld uit. */
.lava .bel {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}
.lava .b1  { animation: lavaA 19s ease-in-out infinite; }
.lava .b2  { animation: lavaB 23s ease-in-out infinite; }
.lava .b3  { animation: lavaC 21s ease-in-out infinite; }
.lava .b4  { animation: lavaD 26s ease-in-out infinite; }
.lava .b5  { animation: lavaE 17s ease-in-out infinite; }
.lava .b6  { animation: lavaF 24s ease-in-out infinite; }
.lava .b7  { animation: lavaG 15s ease-in-out infinite; }
.lava .b8  { animation: lavaH 18s ease-in-out infinite; }
.lava .b9  { animation: lavaI 22s ease-in-out infinite; }
.lava .b10 { animation: lavaJ 20s ease-in-out infinite; }
.lava .b11 { animation: lavaK 25s ease-in-out infinite; }

/* Negatieve vertraging: elke bel begint midden in zijn eigen beweging. Zonder
   dit staan ze bij het laden allemaal netjes op hun startplek en ziet de eerste
   seconde er symmetrisch en stil uit. */
.lava .b1  { animation-delay:  -3s; }
.lava .b2  { animation-delay:  -7s; }
.lava .b3  { animation-delay: -11s; }
.lava .b4  { animation-delay:  -2s; }
.lava .b5  { animation-delay:  -9s; }
.lava .b6  { animation-delay: -14s; }
.lava .b7  { animation-delay:  -5s; }
.lava .b8  { animation-delay: -12s; }
.lava .b9  { animation-delay:  -8s; }
.lava .b10 { animation-delay:  -6s; }
.lava .b11 { animation-delay: -16s; }

/* De losse belletjes die hier stonden zijn eruit: ze zweefden in de lege
   ruimte naast en onder de figuur en lazen als stofjes, niet als bellen. Het
   losraken en weer samenvloeien gebeurt nu binnen de massa zelf. */

.hero-worker-img {
    z-index: 5;
    width: min(440px, 48vw); max-height: 545px;
    animation: heroZweef 9s ease-in-out infinite;
}
.dark-theme .hero-worker-img {
    /* Strak op het silhouet. De zachte plek op de bel eronder geeft de diepte;
       een brede zwarte gloed maakte er een uitgeknipt plaatje van. */
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .5)) drop-shadow(0 16px 30px rgba(0, 0, 0, .3));
}
.hero-card { z-index: 6; }
.hero-card.c1 { top: 11%; left: 6%; }
.hero-card.c2 { bottom: 18%; right: -3%; }

/* --- telefoon + belofte -------------------------------------------------- */
.hero-onder {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
    margin-bottom: 20px;
}
.hero-onder .hero-tel { margin-bottom: 0; }
.hero-belofte {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .86rem; font-weight: 650; color: var(--text-secondary);
    padding: 5px 14px 5px 12px; margin: 0;
    border: 1px solid var(--border-color); border-radius: var(--radius-full);
    background: var(--card-bg);
}
.hero-belofte .stip {
    width: 8px; height: 8px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
    animation: pulseDot 2.4s infinite;
}

.hero-trust { gap: 8px 16px; }

/* --- de strook met de reden om te kiezen -------------------------------- */
.hero-waarom {
    grid-column: 1 / -1;
    position: relative; z-index: 3;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 30px; padding-top: 30px;
    /* Bewust weinig ruimte eronder: de schuine rand van de sectie hieronder komt
       een stukje omhoog en loopt zo achter de kaarten door. Ze steken er dus
       overheen in plaats van er net boven te blijven zweven. */
    padding-bottom: 26px;
    border-top: 1px solid var(--border-color);
}
.waarom-kaart {
    position: relative; padding: 20px 20px 20px 22px;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    transition: transform .38s var(--ease-out), box-shadow .38s var(--ease),
                border-color .3s var(--ease), padding-bottom .38s var(--ease-out);
}
/* De kaart groeit precies evenveel als hij omhoog gaat. Zonder die correctie
   glipt de onderrand onder de cursor vandaan en gaat het blok trillen zodra je
   de rand raakt. */
.waarom-kaart:hover {
    transform: translateY(-4px); padding-bottom: 24px;
    box-shadow: var(--shadow-md); border-color: var(--accent-line);
}
.waarom-kaart::before {
    content: ''; position: absolute; left: 0; top: var(--radius-lg); bottom: var(--radius-lg);
    width: 3px; border-radius: 3px; background: var(--accent);
    opacity: 0; transition: opacity .3s var(--ease);
}
.waarom-kaart:hover::before { opacity: 1; }
.waarom-icoon {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; margin-bottom: 13px;
    border-radius: var(--radius-md);
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    color: var(--accent); font-size: 1rem;
}
.hero-waarom h2 {
    font-size: 1.02rem; font-weight: 780; letter-spacing: -.015em;
    color: var(--text-primary); margin-bottom: 7px; line-height: 1.3;
}
.hero-waarom p {
    font-size: .89rem; line-height: 1.62; color: var(--text-secondary); margin: 0;
    text-wrap: pretty;
}

/* --- kleinere schermen --------------------------------------------------- */
@media (max-width: 1100px) {
    .hero-waarom { grid-template-columns: 1fr; gap: 12px; padding-bottom: 34px; }
    .waarom-kaart { padding: 17px 18px; }
    .waarom-icoon { width: 34px; height: 34px; margin-bottom: 10px; font-size: .9rem; }
}
@media (max-width: 900px) {
    .hero { padding-block: 30px 0; }
    .hero .container { grid-template-columns: 1fr; }
    .hero-visual { min-height: 420px; order: -1; }
    .lava { width: min(112%, 460px); }
    .hero-worker-img { width: min(330px, 74vw); max-height: 400px; }
    .hero-card.c1 { top: 2%; left: -2%; }
    .hero-card.c2 { bottom: 8%; right: -2%; }
}
@media (max-width: 560px) {
    .hero-onder { gap: 8px 14px; }
    .hero-belofte { font-size: .8rem; }
}

/* Wie animaties heeft uitgezet, krijgt een stilstaande lamp. */
@media (prefers-reduced-motion: reduce) {
    .lava .bel, .hero-worker-img { animation: none !important; }
}


/* ==========================================================================
   42. DEZELFDE VLOEISTOFTAAL OVERAL
   --------------------------------------------------------------------------
   Bovenaan de pagina staat een lavalamp, maar bij de diensten stonden nog
   twee vlakke, felblauwe cirkels. Dat viel uit elkaar: het ene deel van de
   site zag er anders uit dan het andere. De diensten krijgen nu dezelfde
   vorm, hetzelfde verloop en dezelfde rustige beweging — alleen kleiner.
   ========================================================================== */

.sky-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lava-mini {
    position: absolute; z-index: 1;
    /* Fors groter dan eerst: de vorm moet de figuur dragen, niet als een
       postzegel achter haar plakken. */
    width: min(430px, 112%); aspect-ratio: 1;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    opacity: var(--lava-dek);
    filter: drop-shadow(0 20px 50px rgba(26, 86, 219, .14));
    pointer-events: none; overflow: visible;
}
.dark-theme .lava-mini { filter: drop-shadow(0 18px 46px rgba(0, 0, 0, .42)); }

.lava-mini .bel { transform-box: fill-box; transform-origin: center; will-change: transform; }
.lava-mini .m1 { animation: lavaA 19s ease-in-out -4s infinite; }
.lava-mini .m2 { animation: lavaB 23s ease-in-out -9s infinite; }
.lava-mini .m3 { animation: lavaC 21s ease-in-out -2s infinite; }
.lava-mini .m4 { animation: lavaD 26s ease-in-out -13s infinite; }
/* Bewust de rustige banen: in een vak van 300 eenheden zou een bel die
   zestig eenheden reist het hele vormpje uit elkaar trekken. */
.lava-mini .m5 { animation: lavaE 20s ease-in-out -7s infinite; }
.lava-mini .m6 { animation: lavaF 25s ease-in-out -16s infinite; }

.lava-mini-glans {
    position: absolute; z-index: 2; pointer-events: none;
    width: min(190px, 42%); aspect-ratio: 1.1;
    left: 42%; top: 40%; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 36% 30%,
                rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 38%, transparent 60%);
    filter: blur(14px); mix-blend-mode: soft-light; opacity: .8;
}
/* In het donker viel de lichtvlek naast de vorm en werd het een grijze waas op
   de zwarte ondergrond — een soort lensflare die er niet hoort. Klein en zwak
   houden, zodat hij alleen ín de bel oplicht. */
.dark-theme .lava-mini-glans { opacity: .22; width: min(150px, 34%); filter: blur(18px); }

/* De figuur zweeft mee, net als bovenaan de pagina. Hij groeit mee met de
   grotere bel: anders staat hij er als een postzegel middenin. */
.worker-png-mini {
    width: min(320px, 82%); max-height: 400px;
    animation: heroZweef 11s ease-in-out infinite;
}
/* Eerder hing er een grote zwarte wolk om de figuur. Nu een strakke schaduw
   dicht op het silhouet; de zachte schaduw op de bel doet het diepte-werk. */
.dark-theme .worker-png-mini {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)) drop-shadow(0 12px 24px rgba(0, 0, 0, .3));
}
.dienst-mini-visual:hover .worker-png-mini { transform: translateY(-7px); }

@media (prefers-reduced-motion: reduce) {
    .lava-mini .bel, .worker-png-mini { animation: none !important; }
}


/* ==========================================================================
   43. DE FOTOBAND
   --------------------------------------------------------------------------
   Een afbouwbedrijf verkoopt zichtbaar werk. Deze strook zet het opgeleverde
   werk meteen onder de hero, zodat niemand er eerst drie secties voor hoeft
   te scrollen. Hij schuift langzaam door en staat stil zodra je hem nadert.
   ========================================================================== */
/* De strook heeft bewust een eigen, dekkende ondergrond en ligt boven de
   schuine randen van de secties eromheen. Zonder dat sneed de schuine lijn van
   de sectie hieronder dwars door de foto's heen — een halve diagonaal over een
   rij liggende beelden, dat las als een fout. Nu begint die lijn netjes onder
   de strook.
   De regel is extra specifiek (main > section) omdat er verderop een regel
   staat die alle niet-schuine secties doorzichtig maakt. */
main > section.fotoband:not(.tilted) {
    position: relative; z-index: 6;
    padding: 26px 0 30px;
    /* Een tikje dieper dan de secties eromheen, zodat de strook leest als een
       verzonken plank met werk erin en niet als hetzelfde vlak. */
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--bg-tertiary) 70%, var(--bg-secondary)) 0%,
                var(--bg-secondary) 100%);
    border-block: 1px solid var(--border-color);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    overflow: hidden;
}
.dark-theme main > section.fotoband:not(.tilted) {
    background: linear-gradient(180deg,
                color-mix(in srgb, #000 22%, var(--bg-secondary)) 0%,
                var(--bg-secondary) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.fotoband-kop {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.fotoband-kop h2 {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-secondary); margin: 0;
}
.fotoband-kop h2 i { color: var(--accent); font-size: .95rem; }
.fotoband-alles {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer; padding: 4px 2px;
    color: var(--accent); font: inherit; font-size: .87rem; font-weight: 700;
}
.fotoband-alles i { transition: transform .3s var(--ease); font-size: .78rem; }
.fotoband-alles:hover i { transform: translateX(4px); }

/* De rand links en rechts vervaagt, zodat de strook doorloopt in plaats van
   dat er foto's halverwege worden afgekapt. */
.fotoband-spoor {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fotoband-rij {
    display: flex; gap: 14px; width: max-content;
    animation: bandSchuif 78s linear infinite;
}
.fotoband-spoor:hover .fotoband-rij,
.fotoband-spoor:focus-within .fotoband-rij { animation-play-state: paused; }

.fotoband-foto {
    position: relative; flex: 0 0 auto;
    width: 268px; aspect-ratio: 4 / 3;
    padding: 0; border: 1px solid var(--border-color); cursor: pointer;
    border-radius: var(--radius-md); overflow: hidden; background: var(--bg-tertiary);
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.fotoband-foto img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .7s var(--ease-out), filter .45s var(--ease);
}
.fotoband-foto:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.fotoband-foto:hover img { transform: scale(1.06); }

/* Het bijschrift komt pas op als je de foto aanwijst; anders is de strook
   een muur van tekst. */
.fotoband-bijschrift {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 12px 9px; text-align: left;
    font-size: .78rem; font-weight: 650; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 20, .82));
    opacity: 0; transform: translateY(6px);
    transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}
.fotoband-foto:hover .fotoband-bijschrift,
.fotoband-foto:focus-visible .fotoband-bijschrift { opacity: 1; transform: none; }

@media (max-width: 700px) {
    .fotoband { padding: 20px 0 24px; }
    .fotoband-foto { width: 208px; }
    .fotoband-rij { animation-duration: 58s; }
}
@media (prefers-reduced-motion: reduce) {
    .fotoband-rij { animation: none; }
    .fotoband-spoor { overflow-x: auto; }
}


/* ==========================================================================
   44. VASTE ACTIEBALK OP DE TELEFOON
   --------------------------------------------------------------------------
   Bijna de helft van de bezoekers kijkt op een telefoon, en daar staat de
   knop uit het menu na één veeg al buiten beeld. Deze balk houdt bellen en
   aanvragen altijd binnen duimbereik, zonder de rest van de pagina te
   overschreeuwen: hij verschijnt pas ná de hero.
   ========================================================================== */
.mobiele-balk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: none; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--nav-bg);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--border-color);
    transform: translateY(110%);
    transition: transform .38s var(--ease-out);
}
.mobiele-balk.zichtbaar { transform: none; }
.mb-knop {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 12px; border: 0; cursor: pointer;
    border-radius: var(--radius-md); font: inherit; font-size: .93rem; font-weight: 700;
    text-decoration: none; white-space: nowrap;
}
.mb-bel { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); }
.mb-aanvraag { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.mb-knop i { font-size: .95rem; }

@media (max-width: 780px) {
    .mobiele-balk { display: flex; }
    /* De zwevende knoppen rechtsonder schuiven omhoog, anders staan ze erop. */
    .floating-actions { bottom: calc(78px + env(safe-area-inset-bottom)); }
    body { padding-bottom: 0; }
}
@media print { .mobiele-balk { display: none !important; } }


/* ==========================================================================
   45. LAATSTE AFWERKING
   ========================================================================== */

/* De tijdlijn liep over de volle breedte, waardoor het tijdsblokje rechts
   meters van de tekst af kwam te staan en er een gat in het midden viel.
   In een smallere kolom vormen stap, tekst en doorlooptijd één geheel. */
.timeline { max-width: 860px; margin-inline: auto; }

/* Een sectiekop verdient een streepje dat meegroeit, niet eentje die er
   plots staat. */
.section-head .section-title::after { transform-origin: center; }
.section-head[data-reveal].revealed .section-title::after { animation: streepGroei .7s var(--ease-out) .15s both; }
.section-head.left[data-reveal].revealed .section-title::after { animation-name: streepGroeiLinks; }

/* Het bolletje bij de openingstijden. Groen = er zit nu iemand; grijs = buiten
   werktijd. Bewust klein: het is een geruststelling, geen reclame. */
.nu-status {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 14px; padding: 6px 14px 6px 12px;
    border: 1px solid var(--border-color); border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    font-size: .82rem; font-weight: 620; color: var(--text-secondary);
}
.nu-status .nu-stip {
    width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto;
}
.nu-status.open { color: var(--text-primary); }
.nu-status.open .nu-stip {
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
    animation: pulseDot 2.4s infinite;
}

/* De lege projectkaart: geen gat, maar een net vak met wat we al weten. */
.project-nogleeg { position: relative; overflow: hidden; }
.nogleeg-raster {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000, transparent 78%);
}
.project-nogleeg > * { position: relative; }
.nogleeg-klasse {
    margin-top: 12px; padding: 5px 13px; border-radius: var(--radius-full);
    background: var(--accent); color: #fff; font-size: .76rem; font-weight: 700;
}

/* Bijschrift in de lightbox: welke ruimte of welk detail je precies ziet. */
.lightbox-bijschrift {
    position: absolute; left: 16px; bottom: 16px; z-index: 3;
    max-width: calc(100% - 150px);
    padding: 6px 13px; border-radius: var(--radius-full);
    background: rgba(8, 11, 20, .68); color: #fff;
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}


/* --------------------------------------------------------------------------
   DE SCHADUW VAN DE FIGUUR OP DE BEL
   Een brede, sterk vervaagde vlek onder de figuur. Die doet het diepte-werk
   dat eerst met een slagschaduw rond het hele silhouet werd gedaan — dat gaf
   een harde rand en, in het donker, een grijze wolk naast de vorm.
   -------------------------------------------------------------------------- */
.blob-schaduw {
    position: absolute; z-index: 3; pointer-events: none;
    left: 50%; bottom: 12%;
    width: 62%; aspect-ratio: 2.6;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%,
                rgba(9, 16, 34, .34) 0%, rgba(9, 16, 34, .16) 45%, transparent 72%);
    filter: blur(22px);
}
.dark-theme .blob-schaduw {
    background: radial-gradient(ellipse at 50% 50%,
                rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 45%, transparent 74%);
    filter: blur(26px);
}
.hero-lamp .blob-schaduw { bottom: 14%; width: 58%; }
.dienst-mini-visual .blob-schaduw { bottom: 16%; width: 60%; }

/* Meer lucht rond de grotere bellen bij de diensten. */
.dienst-mini-visual { min-height: 330px; }
@media (max-width: 900px) { .dienst-mini-visual { min-height: 280px; } }


/* ==========================================================================
   46. EEN SLAG RUSTIGER — ALLES IETS KLEINER
   --------------------------------------------------------------------------
   De site stond te ver ingezoomd: koppen, kaarten en tussenruimtes vulden het
   scherm zo dat je per keer weinig zag. Alles gaat hier een paar procent
   omlaag en de kolom wordt iets breder. Netto zie je meer tegelijk, zonder
   dat er iets krap gaat staan.

   De maten staan in rem, dus één regel op html schaalt de hele site mee.
   Breekpunten staan in px en blijven dus gewoon op hun plek.
   ========================================================================== */
html { font-size: 15.2px; }

:root {
    --section-y: clamp(44px, 4.7vw, 66px);
    --fs-display: clamp(1.9rem, 3.5vw, 2.7rem);
    --fs-h2:      clamp(1.45rem, 2.25vw, 1.85rem);
    --fs-h3:      clamp(1.05rem, 1.38vw, 1.24rem);
    --fs-lead:    clamp(.94rem, 1vw, 1.01rem);
}

.container { width: min(93%, 1320px); }
.container-narrow { width: min(93%, 1000px); }

.hero h1 { font-size: clamp(1.9rem, 3.1vw, 2.5rem); }
.hero { padding-block: 38px 0; }


/* ==========================================================================
   47. DE TELEFOON
   --------------------------------------------------------------------------
   Op een klein scherm namen de bellen met de figuren bijna een heel scherm in
   beslag. Mooi, maar je scrolde er drie keer langs voordat je bij de tekst
   was — en op een telefoon is scrollen de duurste handeling die er is. Alle
   beelden gaan hier fors omlaag, de kaarten worden compacter en wat naast
   elkaar kán, staat naast elkaar.
   ========================================================================== */
@media (max-width: 780px) {

    /* --- bovenaan de pagina ------------------------------------------- */
    .hero-visual { min-height: 296px; }
    .lava { width: min(94%, 330px); }
    .lava-gloed { width: min(104%, 380px); }
    .hero-worker-img { width: min(232px, 62vw); max-height: 300px; }
    .hero-card { padding: 9px 12px; gap: 9px; }
    .hero-card i { font-size: .92rem; }
    .hero-card strong { font-size: .79rem; }
    .hero-card span { font-size: .69rem; }
    .hero-card.c1 { top: 0; left: 0; }
    .hero-card.c2 { bottom: 4%; right: 0; }

    .hero-waarom { margin-top: 22px; padding-top: 22px; gap: 10px; }
    .waarom-kaart { padding: 15px 16px; }
    .waarom-icoon { width: 32px; height: 32px; margin-bottom: 9px; font-size: .85rem; }
    .hero-waarom h2 { font-size: .96rem; }
    .hero-waarom p  { font-size: .85rem; line-height: 1.58; }
    .hero-trust li  { font-size: .83rem; }

    /* --- de diensten --------------------------------------------------- */
    .dienst-mini-visual { min-height: 226px; }
    .lava-mini { width: min(310px, 92%); }
    .worker-png-mini { width: min(206px, 55vw); max-height: 248px; }
    .dienst-pair { gap: 8px; }

    /* --- waarom Skyline: twee smalle kolommen i.p.v. acht volle kaarten -- */
    .usp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .usp-card { padding: 15px 14px; }
    .usp-icon { width: 34px; height: 34px; font-size: .9rem; margin-bottom: 10px; }
    .usp-card h3 { font-size: .9rem; margin-bottom: 6px; }
    .usp-card p  { font-size: .8rem; line-height: 1.55; }

    /* --- de rest ------------------------------------------------------- */
    .klasse-card { padding: 18px 16px; }
    .meewerk-card { padding: 20px 18px; }
    .project-blok { gap: 14px; }

    /* De zwevende knoppen namen een kwart van de breedte in. */
    .floating-btn { width: 44px; height: 44px; font-size: .98rem; }
    .floating-actions { gap: 9px; right: 12px; }
    .floating-label { display: none; }
    /* Vier zwevende knoppen boven op een balk met nog eens twee knoppen is te
       veel voor een telefoonscherm. "Naar boven" vervalt: die staat toch al in
       elke browser onder de adresbalk. */
    .floating-item:has(#scrollToTop) { display: none; }
}

@media (max-width: 480px) {
    /* Onder de 480 wordt twee kolommen te krap voor een hele zin. */
    .usp-grid { grid-template-columns: 1fr; }
    .hero-visual { min-height: 266px; }
    .lava { width: min(92%, 300px); }
    .hero-worker-img { width: min(212px, 60vw); max-height: 272px; }
    .fotoband-kop h2 { font-size: .74rem; letter-spacing: .1em; }
    .fotoband-alles { font-size: .82rem; }
}

/* Alles waar een duim op moet kunnen landen, minstens 44 pixels hoog —
   dat is de maat die Apple en Google allebei aanhouden. */
@media (pointer: coarse) {
    .btn, .calc-step-tab, .faq-vraag, .lb-mini, .taal-lijst a,
    .fotoband-alles, .nav-list > li > a { min-height: 44px; }
    .btn, .fotoband-alles { display: inline-flex; align-items: center; justify-content: center; }
    .calc-step-tab { padding-block: 11px; }
}

/* --------------------------------------------------------------------------
   Twee panelen die op een smal scherm bleven "plakken".
   .faq-aside en .calc-result staan op de desktop sticky, zodat ze meelopen
   naast een lange lijst. Onder de 1180 px worden die lijsten enkelkoloms en
   staat de regel `position: static` al klaar — maar verderop in dit bestand
   zet een latere regel ze weer op `relative` (die hebben ze nodig voor het
   blauwe streepje bovenaan). Daardoor werkte de `top`-verschuiving weer, schoof
   het paneel 96 pixels omlaag en liep de lijst eronder er dwars doorheen.
   Hier zetten we alleen die verschuiving uit; de rest blijft staan.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .faq-aside, .calc-result {
        position: relative;
        top: auto; bottom: auto;
        margin-bottom: 4px;
    }
}

/* --------------------------------------------------------------------------
   De fotoband op een aanraakscherm.
   Vanzelf doorschuiven kun je met een muis stilzetten door er even op te
   staan; met een vinger niet. Op een telefoon wordt het daarom een gewone
   strook die je zelf doorveegt, met snapping zodat elke foto netjes uitkomt.
   De tweede, dubbele rij (die alleen bestaat om de lus onzichtbaar te maken)
   valt dan weg.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .fotoband-rij { animation: none; width: auto; padding-inline: 3vw; }
    .fotoband-foto[aria-hidden="true"] { display: none; }
    .fotoband-spoor {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; scrollbar-width: none;
        -webkit-mask-image: none; mask-image: none;
    }
    .fotoband-spoor::-webkit-scrollbar { display: none; }
    .fotoband-foto { scroll-snap-align: center; }

    /* De sluitknop bovenaan een venster hoort naast de titel te staan, niet
       halverwege een regel die over twee regels loopt. */
    .popup-header { align-items: flex-start; }
}


/* ==========================================================================
   48. DE POSTCODECHECK KLEURT DE KAART
   --------------------------------------------------------------------------
   Iemand vult een postcode in en leest daarna een zin. Die zin blijft veel
   beter hangen als de provincie er tegelijk oplicht: je ziet in één oogopslag
   wáár je zit ten opzichte van de standplaats. Drie kleuren, drie antwoorden:

     groen  — kernregio, hier zijn wij snel ter plaatse
     amber  — hier komen wij regelmatig, even overleggen
     blauw  — verder weg, bespreekbaar

   Alleen de vulkleur verandert; de vorm blijft staan. Een provincie die bij
   het oplichten ook nog verschuift, leest als een storing.
   ========================================================================== */
.nl-kaart .prov.treffer-kern,
.nl-kaart .prov.kern.treffer-kern     { fill: var(--treffer-ja);   --treffer-gloed: var(--treffer-ja); }
.nl-kaart .prov.treffer-nabij,
.nl-kaart .prov.kern.treffer-nabij    { fill: var(--treffer-soms); --treffer-gloed: var(--treffer-soms); }
.nl-kaart .prov.treffer-overleg,
.nl-kaart .prov.kern.treffer-overleg  { fill: var(--treffer-ver);  --treffer-gloed: var(--treffer-ver); }

/* De gloed pakt de kleur van de treffer zelf. Eerder stond hier currentColor;
   dat is bij een SVG-groep de geërfde tekstkleur en niet de vulkleur, dus je
   kreeg een grijszwarte wolk om de provincie heen. */
.nl-kaart .prov[class*="treffer-"] {
    animation: provLicht 2.4s var(--ease-out) 2;
}
.nl-kaart .prov[class*="treffer-"] path { stroke-width: 1.3; }

:root {
    --treffer-ja:   #0f9d6e;
    --treffer-soms: #d97706;
    /* Bewust géén accentblauw: dat is precies de kleur van de kernprovincies,
       waardoor Zeeland er net zo "ja" uitzag als Gelderland. Een rustige
       leisteenblauwe tint leest als "kan, even bespreken". */
    --treffer-ver:  #6d7f9e;
}
.dark-theme {
    --treffer-ja:   #3fae86;
    --treffer-soms: #cc9448;
    --treffer-ver:  #8496b5;
}

/* De uitslag onder het invoerveld krijgt dezelfde kleur als de provincie,
   zodat tekst en kaart bij elkaar horen. */
.postcode-result.kern    { border-color: color-mix(in srgb, var(--treffer-ja) 45%, transparent); }
.postcode-result.nabij   { border-color: color-mix(in srgb, var(--treffer-soms) 45%, transparent); }
.postcode-result.overleg { border-color: color-mix(in srgb, var(--treffer-ver) 45%, transparent); }
.postcode-result.kern    > i:first-child { color: var(--treffer-ja); }
.postcode-result.nabij   > i:first-child { color: var(--treffer-soms); }
.postcode-result.overleg > i:first-child { color: var(--treffer-ver); }
.postcode-result.kern    { color: var(--treffer-ja); }
.postcode-result.nabij   { color: var(--treffer-soms); }
.postcode-result.overleg { color: var(--text-secondary); }
.postcode-result strong  { color: var(--text-primary); font-weight: 750; }