/* ==========================================================================
   Filterwand.be

   De kleuren komen uit het logo van de klant, niet uit een gok: het EPS
   bevat cmyk 75/7/30/0 voor het turquoise en cmyk 96/78/45/44 voor het navy,
   kleurbeheerd omgezet naar #15AFB7 en #112F49.

   De grote donkere vlakken op de publieke site (hero, sterktes, footer)
   dragen het carbonpatroon; het beheer blijft navy.
   ========================================================================== */

:root {
    --navy:        #112f49;
    --navy-dark:   #0a1f31;
    --navy-soft:   #1c496f;
    --turq:        #15afb7;
    --turq-dark:   #0e8f96;
    --turq-soft:   #e6f7f8;
    --ink:         #272626;
    --ink-soft:    #5a5a5a;
    --line:        #e2e6ea;
    --bg:          #ffffff;
    --bg-alt:      #f5f7f9;
    --danger:      #b3261e;
    --danger-soft: #fdecea;
    --ok:          #1e7a4a;
    --ok-soft:     #e7f5ed;

    --radius:      6px;
    --radius-lg:   12px;
    --shadow:      0 1px 3px rgba(16, 47, 73, .08), 0 8px 24px rgba(16, 47, 73, .06);
    --shadow-lg:   0 2px 6px rgba(16, 47, 73, .10), 0 16px 40px rgba(16, 47, 73, .10);
    --maxw:        1160px;
    --font:        "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* Het carbonpatroon van de klant. De tegel is 94 px, precies drie keer de
       periode van de weving, dus hij herhaalt zonder zichtbare naad. Onder de
       tegel staat een effen kleur: die telt als achtergrond zolang het beeld
       nog niet geladen is, en voorkomt een wit opflitsen.
       De tegel is 974 bytes; het aangeleverde bestand was 2,4 MB. */
    --carbon-vlak: #2f2d2e;
    --carbon:      url("../img/patroon.webp") repeat 0 0 / 62px var(--carbon-vlak);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 0 .6em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--turq-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* --- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--carbon); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--tight { padding-top: 0; }

.grid { display: grid; gap: 28px; }
/* Echt twee kolommen. Met auto-fit werden vier kaarten op /aanbod een rij van
   drie plus een eenzame vierde. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid--2 { grid-template-columns: 1fr; } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }

/* --- header -------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-beeld { display: block; height: 46px; width: auto; flex: none; }
@media (max-width: 520px) { .logo-beeld { height: 34px; } }

.nav { display: flex; align-items: center; gap: 4px; }
/* :not(.btn) is hier geen franje. Zonder dat wint `.nav a` (klasse + element)
   het van `.btn` (alleen klasse), ongeacht de volgorde in dit bestand. De knop
   kreeg daardoor de menukleur, en bij hover de lichtgrijze menuachtergrond —
   met witte tekst erop, dus onleesbaar. */
.nav a:not(.btn) {
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: .95rem;
}
.nav a:not(.btn):hover { background: var(--bg-alt); text-decoration: none; }
.nav a:not(.btn).is-active { color: var(--turq-dark); font-weight: 600; }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px 12px;
    cursor: pointer;
    color: var(--navy);
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 8px 20px 16px;
        box-shadow: var(--shadow);
    }
    .nav.is-open { display: flex; }
    .nav a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
    .nav .btn { margin-top: 12px; text-align: center; }
}

/* --- knoppen ------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    font-size: .98rem;
    font-family: inherit;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.btn:hover { background: var(--navy-dark); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--turq { background: var(--turq); }
.btn--turq:hover { background: var(--turq-dark); }
.btn--ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: #f0f3f6; color: var(--navy); }
.btn--sm { padding: 8px 16px; font-size: .88rem; }
.btn--block { display: block; width: 100%; }

/* --- hero ---------------------------------------------------------------- */
.hero { background: var(--carbon); color: #fff; padding: clamp(3rem, 2rem + 5vw, 6rem) 0; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero p { color: rgba(255, 255, 255, .88); font-size: 1.14rem; max-width: 54ch; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
/* De productfoto's zijn uitgeknipt en hebben zelf een donker paneel. Op de
   carbonachtergrond zou dat wegvallen, vandaar een lichte kaart eronder. */
.hero-figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff 0%, #eef3f6 100%);
    aspect-ratio: 4 / 3;
    padding: 18px;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) {
    .hero .wrap { grid-template-columns: 1fr; }
}

/* --- kaarten ------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; background: var(--bg-alt); padding: 10px; }
.card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: .3em; }
.card__meta { font-size: .86rem; color: var(--turq-dark); font-weight: 600; margin-bottom: .8em; }
.card__body p { color: var(--ink-soft); font-size: .95rem; }
.card__foot { margin-top: auto; padding-top: 18px; }

.feature { text-align: center; padding: 8px; }
.feature__icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--turq-soft);
    color: var(--turq-dark);
}
.section--navy .feature__icon { background: rgba(255, 255, 255, .12); color: #fff; }
.feature h3 { font-size: 1.02rem; margin-bottom: .35em; }
.feature p { font-size: .92rem; color: var(--ink-soft); }
.section--navy .feature p { color: rgba(255, 255, 255, .8); }

/* --- lijsten ------------------------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
    position: relative;
    padding: 7px 0 7px 32px;
    border-bottom: 1px solid var(--line);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
    content: "";
    position: absolute;
    left: 4px; top: 15px;
    width: 14px; height: 8px;
    border-left: 2.5px solid var(--turq);
    border-bottom: 2.5px solid var(--turq);
    transform: rotate(-45deg);
}

.steps { counter-reset: step; display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; }
.step__num {
    counter-increment: step;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.15rem;
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: .25em; }

/* --- formulieren --------------------------------------------------------- */
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }

/* Raster met een vaste indeling: vier kolommen waarin velden een breedte
   krijgen die past bij hun inhoud. Een huisnummer hoort niet even breed te
   zijn als een straatnaam. Onder 760px valt alles terug op één kolom. */
.form-grid--vast { grid-template-columns: repeat(4, 1fr); }
.field--kwart      { grid-column: span 1; }
.field--half       { grid-column: span 2; }
.field--driekwart  { grid-column: span 3; }

@media (max-width: 760px) {
    .form-grid--vast { grid-template-columns: 1fr; }
    .form-grid--vast .field { grid-column: 1 / -1; }
}

/* Verplicht-markering */
.req { color: var(--danger); font-weight: 700; margin-left: 2px; }
.form-legend { font-size: .85rem; color: var(--ink-soft); margin-top: 1.4rem; }
.form-legend .req { margin-left: 0; }

label { font-weight: 600; font-size: .92rem; color: var(--navy); }
.label-hint { font-weight: 400; color: var(--ink-soft); font-size: .85rem; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=search], input[type=date], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #c7ced5;
    border-radius: var(--radius);
    font: inherit;
    font-size: .97rem;
    color: var(--ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--turq);
    box-shadow: 0 0 0 3px rgba(21, 175, 183, .18);
}
textarea { min-height: 130px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a5a5a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }

.field-error { color: var(--danger); font-size: .86rem; font-weight: 600; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }

.checkbox { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: .94rem; color: var(--ink); cursor: pointer; }
.checkbox input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--turq); flex: none; }

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

.alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 22px; font-size: .95rem; }
.alert--error { background: var(--danger-soft); color: var(--danger); border: 1px solid #f3c6c2; }
.alert--ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #b9e2cb; }
.alert--info { background: var(--turq-soft); color: var(--navy); border: 1px solid #b3e5e8; }

/* --- calculator ---------------------------------------------------------- */
.calc { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; gap: 24px; } }

.calc-steps { list-style: none; margin: 0; padding: 0; position: sticky; top: 100px; }
@media (max-width: 900px) { .calc-steps { position: static; display: flex; overflow-x: auto; gap: 6px; } }
.calc-steps li {
    padding: 11px 14px;
    border-left: 3px solid var(--line);
    color: var(--ink-soft);
    font-size: .93rem;
    white-space: nowrap;
}
@media (max-width: 900px) { .calc-steps li { border-left: 0; border-bottom: 3px solid var(--line); } }
.calc-steps li.is-active { border-color: var(--turq); color: var(--navy); font-weight: 700; background: var(--turq-soft); }
.calc-steps li.is-done { border-color: var(--turq); color: var(--ink); }

.calc-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3vw, 36px);
    box-shadow: var(--shadow);
}
.calc-step[hidden] { display: none; }
.calc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Twee kolommen: met vier filterwanden geeft auto-fit een rij van drie plus
   een losse vierde, en dat leest als "de vierde hoort er niet bij". */
.choice-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } }
.choice { position: relative; font-weight: 400; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
    display: block;
    height: 100%;
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: #fff;
}
.choice__box:hover { border-color: #b9c4cf; }
.choice input:checked + .choice__box { border-color: var(--turq); box-shadow: 0 0 0 3px rgba(21, 175, 183, .16); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--navy); outline-offset: 2px; }
.choice__media { display: block; aspect-ratio: 4 / 3; background: var(--bg-alt); position: relative; padding: 8px; }
.choice input:checked + .choice__box .choice__media::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(21, 175, 183, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%2315afb7'/%3E%3Cpath d='M13 22.5l6 6 12-12' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}
.choice__text { display: block; padding: 16px 18px; }
.choice__text strong { display: block; color: var(--navy); font-size: 1.02rem; line-height: 1.35; }
.choice__text > span { display: block; margin-top: 3px; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

.option-row {
    display: flex; gap: 14px; align-items: flex-start;
    font-weight: 400;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    cursor: pointer;
}
.option-row:hover { border-color: #b9c4cf; }
.option-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--turq); flex: none; }
.option-row > span { display: block; }
.option-row strong { display: block; color: var(--navy); }
.option-row strong + span { display: block; font-size: .9rem; font-weight: 400; color: var(--ink-soft); }

.volume-box { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; margin-top: 22px; }
.volume-result { font-size: 1.05rem; font-weight: 700; color: var(--navy); }

.summary { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; margin-bottom: 26px; }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .95rem; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 600; color: var(--navy); }

/* --- prijsvork ----------------------------------------------------------- */
.price-range {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 48px);
    text-align: center;
}
.price-range__label { font-size: .95rem; color: rgba(255, 255, 255, .75); margin-bottom: .5rem; }
.price-range__value { font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); font-weight: 700; line-height: 1.1; }
.price-range__note { font-size: .92rem; color: rgba(255, 255, 255, .8); margin-top: 1rem; max-width: 52ch; margin-inline: auto; }
.price-range__ref { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-top: 1.4rem; }

/* --- tabellen ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { background: var(--bg-alt); color: var(--navy); font-weight: 700; white-space: nowrap; }
table.data tbody tr:hover { background: #fafbfc; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data tfoot td { font-weight: 700; border-top: 2px solid var(--navy); border-bottom: 0; }

/* --- footer -------------------------------------------------------------- */
.site-footer { background: var(--carbon); color: rgba(255, 255, 255, .78); padding: 56px 0 28px; font-size: .93rem; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .9em; }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 3px 0; }
.footer-locatie { margin-bottom: 12px; line-height: 1.5; }
.footer-locatie strong { color: #fff; }
.footer-bottom {
    margin-top: 40px; padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    font-size: .86rem; color: rgba(255, 255, 255, .55);
}

/* --- foto's --------------------------------------------------------------
   De filterwanden zijn uitgeknipte productfoto's: die moeten in hun geheel
   zichtbaar blijven (contain), nooit bijgesneden. Sfeerbeelden mogen wel
   het kader vullen (--vullend). */
.foto { display: block; width: 100%; height: 100%; object-fit: contain; }
.foto--vullend { object-fit: cover; }

.foto-blok {
    border-radius: var(--radius-lg);
    overflow: hidden;
    line-height: 0;
}
.foto-blok .foto { height: auto; }

.model-figuur {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-alt);
    aspect-ratio: 4 / 3;
    padding: 16px;
    position: sticky;
    top: 100px;
}
@media (max-width: 860px) {
    .model-figuur { position: static; }
}

/* --- placeholder --------------------------------------------------------- */
.ph {
    display: grid;
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 12px, #e6eaee 12px, #e6eaee 24px);
    color: #9aa7b2; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

.skip-link {
    position: absolute; left: -9999px;
    background: var(--navy); color: #fff; padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 10px; top: 10px; }

@media print {
    .site-header, .site-footer, .calc-nav, .btn { display: none !important; }
}