/* Toolscenter Frans Deutekom – design 3 (Windkracht, designpakket v2). Alleen opmaak; inhoud staat in het CMS.
   Idee: de gereedschapswagen. Rood gelakte laden met een aluminium greep, antraciet frame, werkplaatsgrijze vloer.
   Eén opvallend onderdeel (de kast met laden); de rest rustig: veel wit, links uitgelijnd, zware Montserrat-koppen. */
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('fonts/montserrat-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-display: swap; src: url('fonts/montserrat-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url('fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/roboto-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-display: swap; src: url('fonts/roboto-latin-700-normal.woff2') format('woff2'); }

:root {
  /* huisstijl */
  --red: #d91c15;          /* Snap-on rood: knoppen, laden, topbalk */
  --red-deep: #a8130e;     /* onderrand van een lade, hover */
  --ink: #1a2027;          /* antraciet: tekst, frame van de kast, footer */
  --ink-2: #2a323b;        /* donkere vlakken */
  --steel: #5d6875;        /* bijtekst */
  --alu-1: #f4f6f8;        /* aluminium greep (licht) */
  --alu-2: #a9b2bc;        /* aluminium greep (schaduw) */
  --floor: #eef1f4;        /* werkplaatsvloer: lichte vlakken */
  --line: #d3d9df;
  --white: #fff;
  /* thema (licht); donker staat onderaan bij "Donkere modus" */
  --bg: #fff;              /* pagina */
  --card: #fff;            /* kaarten, formulieren, tegels */
  --fg: var(--ink);        /* tekst en koppen */
  --frame: var(--ink);     /* onderrand van kaarten en laden-frames */
  --red-tint: #fff5f4;     /* fout of gekozen tegel */
  --img-bg: #fff;          /* achter productfoto's */
  --link: var(--red);      /* rode tekst en links */

  --head: 'Montserrat', system-ui, sans-serif;
  --body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --radius: 3px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --pull: linear-gradient(180deg, var(--alu-1) 0%, #d9dee3 45%, var(--alu-2) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font: 400 1.0625rem/1.62 var(--body); color: var(--fg); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--red-deep); }
strong, b { font-weight: 700; }

/* typografie: zware koppen, strak gezet; de tekst eronder rustig */
h1, h2, h3, h4, .h3, .h4, .display { font-family: var(--head); color: var(--fg); margin: 0 0 .5em; text-wrap: balance; }
h1, .display { font-weight: 900; font-size: clamp(2.35rem, 1.5rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-weight: 800; font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.55rem); line-height: 1.1; letter-spacing: -.02em; }
h3, .h3 { font-weight: 800; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
h4, .h4 { font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
p { margin: 0 0 1em; }
.prose { max-width: 68ch; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .3em; }
.lead { font-size: 1.18rem; line-height: 1.55; }
.subtitle { font: 600 clamp(1.05rem, 1rem + .4vw, 1.3rem)/1.35 var(--head); color: var(--link); margin: -.15em 0 1.25rem; max-width: 46ch; }
.eyebrow { font: 600 .95rem var(--head); color: var(--link); margin: 0 0 .5rem; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 820px; }
.center { text-align: center; }

/* knoppen: rood met een donkere onderrand, zoals de lip van een lade */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75rem 1.4rem .8rem; border: 0; border-radius: var(--radius); background: var(--red); box-shadow: inset 0 -4px 0 var(--red-deep); color: #fff; font: 800 1rem/1.15 var(--head); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:hover { background: #c4170f; color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -2px 0 var(--red-deep); }
.btn--small { min-height: 42px; padding: .6rem 1.05rem .65rem; font-size: .92rem; white-space: nowrap; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.link-more { font: 800 1rem var(--head); color: var(--fg); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 3px; text-underline-offset: .35em; }
.link-more:hover { color: var(--link); }

/* topbalk */
.topbar { background: var(--red); color: #fff; font-size: .82rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 34px; }
.topbar-dealer { margin: 0; font: 600 .82rem var(--head); }
.topbar-links { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; }
.topbar a:hover { text-decoration: underline; color: #fff; }

/* kop en menu */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 6px 18px rgba(26, 32, 39, .08); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 88px; }
.logo { flex: none; display: block; }
.logo img { width: 250px; height: auto; transition: width .2s; }
.is-scrolled .logo img { width: 205px; }
.main-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: .15rem; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list a { display: block; padding: .65rem .6rem; color: var(--fg); font: 800 .93rem var(--head); text-decoration: none; white-space: nowrap; }
.nav-list > li > a { box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .15s, color .15s; }
.nav-list > li.active > a, .nav-list > li > a:hover { color: var(--link); box-shadow: inset 0 -3px 0 var(--red); }
.sub-toggle { display: none; background: none; border: 0; padding: .3rem; cursor: pointer; color: var(--fg); }
.sub-toggle svg { width: 22px; height: 22px; fill: currentColor; transition: transform .15s; }
.dropdown { position: absolute; top: 100%; left: -.25rem; min-width: 270px; list-style: none; margin: 0; padding: .4rem 0; background: var(--ink); border-top: 4px solid var(--red); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.dropdown a { padding: .6rem 1.15rem; color: #fff; font: 400 .95rem var(--body); white-space: normal; }
.dropdown a:hover, .dropdown li.active > a { color: #fff; background: var(--ink-2); box-shadow: inset 4px 0 0 var(--red); }
.has-sub:hover > .dropdown, .has-sub:focus-within > .dropdown, .has-sub.open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.header-tools { display: flex; gap: .25rem; }
.icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: var(--radius); background: transparent; color: var(--fg); cursor: pointer; }
.icon-btn:hover { background: var(--floor); }
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.menu-toggle, .menu-close { display: none; }

@media (max-width: 1260px) {
  .logo img, .is-scrolled .logo img { width: 205px; }
  .menu-toggle { display: inline-grid; }
  .header-inner { justify-content: space-between; min-height: 74px; }
  .main-nav { position: fixed; inset: 0 0 0 auto; width: min(400px, 90vw); z-index: 60; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 84px 0 2rem; background: var(--ink); overflow-y: auto; transform: translateX(105%); transition: transform .25s; }
  .main-nav.open { transform: none; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav-list > li > a { flex: 1; padding: 1rem 1.5rem; font-size: 1.1rem; color: #fff; }
  .nav-list > li.active > a, .nav-list > li > a:hover { color: #fff; box-shadow: inset 5px 0 0 var(--red); }
  .sub-toggle { display: inline-grid; place-items: center; width: 52px; height: 52px; color: #fff; }
  .has-sub.open > .sub-toggle svg { transform: rotate(180deg); }
  .dropdown { position: static; display: none; width: 100%; min-width: 0; opacity: 1; visibility: visible; transform: none; border: 0; padding: 0 0 .5rem; background: var(--ink-2); }
  .has-sub.open > .dropdown { display: block; }
  .has-sub:hover > .dropdown { display: none; }
  .has-sub.open:hover > .dropdown { display: block; }
  .dropdown a { padding: .65rem 1.5rem .65rem 2.25rem; }
  .nav-extra { padding: 1.5rem; }
  .nav-extra .btn { width: 100%; }
  body.menu-open { overflow: hidden; }
  body.menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(26, 32, 39, .55); z-index: 45; }
  .main-nav .menu-close { display: inline-grid; position: absolute; top: 16px; right: 16px; color: #fff; }
  .main-nav .menu-close:hover { background: var(--ink-2); }
}
/* grote schermen: menu als donkere balk onder het logo (het bovenblad van de gereedschapswagen) */
@media (min-width: 1261px) {
  .header-inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'logo tools' 'nav nav'; gap: 0; min-height: 0; }
  .logo { grid-area: logo; padding: 16px 0; }
  .header-tools { grid-area: tools; justify-self: end; align-self: center; }
  .main-nav { grid-area: nav; justify-content: space-between; background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
  .nav-list { margin-left: -.6rem; }
  .nav-list > li > a { color: #fff; padding: 1rem .75rem; }
  .nav-list > li.active > a, .nav-list > li > a:hover { color: #fff; box-shadow: inset 0 -4px 0 var(--red); }
  .dropdown { border-top: 0; background: var(--ink-2); }
  .is-scrolled .logo { padding: 8px 0; }
}
@media (max-width: 640px) { .topbar-dealer { display: none; } .topbar-inner { justify-content: center; } .topbar-links { gap: 1.1rem; } }

/* zoeken */
.search-dialog { background: var(--card); color: var(--fg); width: min(100% - 32px, 720px); max-height: 80vh; margin: 10vh auto auto; padding: 0; border: 0; border-top: 5px solid var(--red); border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.search-dialog::backdrop { background: rgba(26, 32, 39, .7); }
.search-form { display: flex; align-items: center; gap: .25rem; padding: .75rem; border-bottom: 1px solid var(--line); }
.search-form input { background: transparent; flex: 1; min-width: 0; border: 0; font: 600 1.2rem var(--head); padding: .6rem .5rem; color: var(--fg); }
.search-form input:focus { outline: none; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results a { display: block; padding: .9rem 1.25rem; text-decoration: none; color: var(--steel); border-bottom: 1px solid var(--floor); }
.search-results a:hover, .search-results a:focus { background: var(--floor); }
.search-results strong { display: block; color: var(--fg); font-family: var(--head); font-weight: 800; }
.search-results small { color: var(--link); font-weight: 700; font-size: .78rem; }
.search-results span { font-size: .92rem; }
.search-status { margin: 0; padding: .75rem 1.25rem; color: var(--steel); font-size: .92rem; }
.search-status:empty { display: none; }

/* sfeerbeelden: rustig wisselend, onderkant als de rand van een werkbank */
.hero { position: relative; height: clamp(220px, 26vw, 360px); overflow: hidden; background: var(--ink); border-bottom: 8px solid var(--red); }
.hero--home { height: clamp(300px, 46vw, 640px); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* teksten en beelden schuiven zacht in bij scrollen (alleen met JavaScript en als de bezoeker beweging toestaat) */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0s); }
.js-reveal .reveal--left { transform: translateX(-28px); }
.js-reveal .reveal--right { transform: translateX(28px); }
.js-reveal .reveal--drawer { opacity: 1; transform: translateX(-36px); transition-duration: .55s; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }

/* secties */
.section { padding: var(--section) 0; }
.section--tint, .section--floor { background: var(--floor); }
.section--dark { background: var(--ink); color: #d5dbe1; }
.section--dark h2, .section--dark h3, .section--dark .h3 { color: #fff; }
.section-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }
.section-head.center { text-align: left; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; }
.section-head--row h2 { margin: 0; }
.cols { display: grid; gap: 2.25rem clamp(2rem, 4vw, 4rem); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col h2, .col .h3 { font-size: 1.3rem; }
.intro .col, .columns .col { border-top: 4px solid var(--frame); padding-top: 1.1rem; }
.section--dark .col { border-top-color: var(--link); }
.intro .section-head h1 { max-width: 18ch; }
.breadcrumb + .intro, .breadcrumb + .category { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (max-width: 860px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

/* ---------- de kast: categorieën als laden ---------- */
.assortment { background: var(--ink); padding: var(--section) 0; }
.assortment-title { color: #fff; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.cabinet { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; background: #0f1418; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 48px rgba(0, 0, 0, .25); }
.drawer a { position: relative; display: block; padding: 22px clamp(1rem, 2.5vw, 2rem) 18px; background: linear-gradient(180deg, #e3241d 0%, var(--red) 55%, #c5170f 100%); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -5px 0 var(--red-deep); color: #fff; text-decoration: none; transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s; }
.drawer-pull { display: block; height: 9px; border-radius: 5px; background: var(--pull); box-shadow: 0 2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 #fff; }
.drawer a .drawer-pull { position: absolute; top: 9px; left: clamp(1rem, 2.5vw, 2rem); right: clamp(1rem, 2.5vw, 2rem); }
.drawer-front { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: .35rem 2rem; padding-top: 10px; }
.drawer-name { font: 900 clamp(1.35rem, 1.05rem + 1.1vw, 2rem)/1.1 var(--head); letter-spacing: -.02em; }
.drawer-sub { font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .86); text-align: right; }
.drawer a:hover, .drawer a:focus-visible { transform: translateY(-3px) scaleX(1.008); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -5px 0 var(--red-deep), 0 10px 18px rgba(0, 0, 0, .45); color: #fff; }
.drawer a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .drawer-front { grid-template-columns: 1fr; }
  .drawer-sub { text-align: left; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .drawer a { transition: none; } .drawer a:hover { transform: none; } }

/* categoriepagina: tekst, daaronder de laden van de productgroepen */
.category-grid { display: block; }
.category-text { max-width: 880px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.category .cabinet { background: var(--ink); }
.category .drawer-sub { max-width: 60ch; justify-self: end; }

/* brochure: een label aan het gereedschap */
.download { padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0; background: var(--bg); }
.download-card { display: flex; align-items: center; gap: 1.25rem; max-width: 640px; padding: 1.1rem 1.4rem; background: var(--ink); border-radius: var(--radius); border-left: 8px solid var(--red); color: #fff; text-decoration: none; transition: background .15s; }
.download-card:hover { background: var(--ink-2); color: #fff; }
.download-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: var(--radius); background: var(--red); }
.download-icon svg { width: 28px; height: 28px; fill: #fff; }
.download-text strong { display: block; font: 900 1.25rem var(--head); letter-spacing: -.01em; }
.download-text small { color: #b8c1ca; font-size: .9rem; }

/* beeld en tekst: productfoto's op de lichte werkplaatsvloer */
.mt-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mt--right .mt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.mt--right .mt-media { order: 2; }
.mt--none .mt-grid { grid-template-columns: minmax(0, 820px); }
.mt-media { margin: 0; }
.mt-media--image { display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--floor); border-radius: var(--radius); border-bottom: 6px solid var(--frame); }
.mt-media--image img { width: 100%; max-height: 440px; object-fit: contain; mix-blend-mode: multiply; }
.mt-text .btn { margin-top: 1.5rem; }
.media-text + .media-text { padding-top: 0; }
@media (max-width: 860px) { .mt-grid, .mt--right .mt-grid { grid-template-columns: 1fr; } .mt--right .mt-media { order: 0; } }

/* video */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); border-bottom: 6px solid var(--red); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* afbeeldingen */
.images-grid { display: grid; gap: 1.25rem; }
.images-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.images-grid figure { margin: 0; padding: clamp(1rem, 2vw, 1.75rem); background: var(--floor); border-radius: var(--radius); }
.images-grid img { width: 100%; mix-blend-mode: multiply; }
.images-1 img { max-height: 520px; object-fit: contain; }
@media (max-width: 640px) { .images-2 { grid-template-columns: 1fr; } }

/* actieblok demonstratie: één grote rode lade */
.cta { position: relative; background: var(--red); color: #fff; box-shadow: inset 0 -10px 0 var(--red-deep); }
.cta-pull { position: absolute; top: 22px; left: var(--gutter); right: var(--gutter); height: 12px; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; padding-top: 1.5rem; }
.cta .display { color: #fff; margin: 0; max-width: 14ch; }
.cta .prose { color: #fff; }
.cta .prose a { color: #fff; }
.cta-inner > .display { grid-row: span 2; align-self: end; }
.cta .btn { margin-top: 0; justify-self: start; align-self: start; background: var(--ink); box-shadow: inset 0 -4px 0 #000; }
.cta .btn:hover { background: #000; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; } }

/* Snap-on dealer */
.brand { padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brand-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; }
.brand-logo { width: 260px; }
.brand-title { font: 900 clamp(1.3rem, 1.1rem + .9vw, 1.9rem)/1.15 var(--head); letter-spacing: -.02em; color: var(--fg); margin: 0; }

/* nieuws */
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 2rem); }
.news-card { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius); overflow: hidden; border-bottom: 5px solid var(--frame); transition: border-color .15s; }
.news-card:hover { border-bottom-color: var(--link); }
.news-overview .news-card { border: 1px solid var(--line); border-bottom: 5px solid var(--frame); }
.news-img { margin: 0; aspect-ratio: 3 / 2; background: var(--img-bg); }
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-img img.is-fallback { object-fit: contain; padding: 22%; opacity: .3; }
.news-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.3rem; }
.news-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 .45rem; font-size: .86rem; color: var(--steel); }
.news-meta span { color: var(--link); font-weight: 700; }
.news-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.news-card h3 a { color: var(--fg); text-decoration: none; }
.news-card h3 a::after { content: ''; position: absolute; inset: 0; }
.news-card:hover h3 a { color: var(--link); }
.news-summary { font-size: .97rem; color: var(--steel); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .9rem; }
.news-more { margin-top: auto; font: 800 .92rem var(--head); color: var(--link); }
.news-status { color: var(--steel); }
.news-status:empty { display: none; }
.feed-note { font-size: .85rem; color: var(--steel); margin: 1rem 0 0; }
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip { min-height: 40px; padding: .4rem 1rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--fg); font: 600 .9rem var(--head); cursor: pointer; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--fg); color: #fff; }
.chip small { opacity: .7; margin-left: .3em; }
.chip--more { border-style: dashed; }

/* berichtpagina */
.article-wrap { max-width: 880px; }
.article .breadcrumb { width: auto; padding: 0 0 1.75rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--steel); font-size: .95rem; }
.article-media { margin: 1.75rem 0 2.25rem; }
.gallery-main { position: relative; background: var(--floor); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border-bottom: 6px solid var(--frame); }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gal-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: var(--radius); background: var(--ink); color: #fff; cursor: pointer; }
.gal-nav:hover { background: var(--red); }
.gal-nav svg { width: 28px; height: 28px; fill: currentColor; }
.gal-prev { left: .75rem; } .gal-prev svg { rotate: 90deg; }
.gal-next { right: .75rem; } .gal-next svg { rotate: -90deg; }
.gal-count { position: absolute; right: .75rem; bottom: .75rem; padding: .2rem .6rem; border-radius: var(--radius); background: var(--ink); color: #fff; font: 600 .82rem var(--head); }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; }
.gallery-thumbs button { flex: none; width: 86px; height: 66px; padding: 3px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--img-bg); cursor: pointer; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--link); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.article-body { font-size: 1.1rem; }
.article-extra { margin-top: 2.25rem; }
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.link-cards a { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius); color: var(--fg); font-weight: 700; text-decoration: none; }
.link-cards a:hover { border-color: var(--fg); }
.link-cards small { display: block; color: var(--steel); font-weight: 400; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags a { display: inline-block; padding: .35rem .85rem; border-radius: var(--radius); background: var(--floor); color: var(--fg); font: 600 .9rem var(--head); text-decoration: none; }
.tags a:hover { background: var(--ink); color: #fff; }
.article-back { margin-top: 3rem; }

/* kruimelpad */
.breadcrumb { padding: 1.4rem 0 0; font-size: .9rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.breadcrumb li + li::before { content: '/'; margin-right: .4rem; color: var(--line); }
.breadcrumb a { color: var(--fg); text-decoration: none; font-weight: 700; }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb svg { width: 18px; height: 18px; fill: var(--ink); display: block; }
.breadcrumb [aria-current] { color: var(--steel); }
.breadcrumb + .section { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* formulieren */
.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); border-top: 6px solid var(--red); padding: clamp(1.25rem, 3vw, 2.5rem); }
.fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.field { grid-column: span 6; display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.field--third { grid-column: span 2; }
.field--two-thirds { grid-column: span 4; }
.field label, .field legend { font: 800 .9rem var(--head); color: var(--fg); }
.req { color: var(--link); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { width: 100%; min-height: 50px; padding: .7rem .85rem; border: 2px solid var(--line); border-radius: var(--radius); font: 1rem var(--body); color: var(--fg); background: var(--card); }
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgba(217, 28, 21, .25); }
.form [aria-invalid="true"] { border-color: var(--link); background: var(--red-tint); }
.field--checks { border: 0; padding: 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; margin-top: .45rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; font: 400 1rem var(--body) !important; color: var(--fg) !important; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: .15rem 0 0; flex: none; accent-color: var(--link); }
.form .btn { margin-top: 1.4rem; }
.form-status { grid-column: 1 / -1; margin: .75rem 0 0; font-weight: 700; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--link); }
.form-status.is-ok { color: #18794e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .checks { grid-template-columns: 1fr; } .field--third, .field--two-thirds { grid-column: span 6; } }
.form--compact .fields { gap: .6rem; }
.form--compact input, .form--compact textarea { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.form--compact input:focus, .form--compact textarea:focus { border-color: #fff !important; }
.form--compact ::placeholder { color: rgba(255, 255, 255, .62); }
.form--compact .form-status.is-ok { color: #8be0b1; }
.form--compact .form-status.is-error { color: #ffb4b0; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-name { font-size: 1.1rem; }
.contact-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list svg { width: 24px; height: 24px; flex: none; fill: var(--red); margin-top: .1rem; }
.contact-list a { color: var(--fg); font-weight: 700; }
.contact-list--big a { font: 900 clamp(1.3rem, 1.1rem + 1vw, 1.8rem) var(--head); letter-spacing: -.01em; text-decoration: none; }
.contact-list--big svg { width: 30px; height: 30px; margin-top: .35rem; }
.contact-meta { color: var(--steel); font-size: .92rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* tekstpagina, 404 en onderhoud */
.text-block .btn { margin-top: 1.5rem; }
.text-block .wrap.center { text-align: left; }
.notfound-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
.notfound-code { margin: 0; font: 900 clamp(5rem, 3rem + 10vw, 11rem)/.85 var(--head); letter-spacing: -.05em; color: var(--link); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 700px) { .notfound-inner { grid-template-columns: 1fr; } }
.maintenance { position: relative; background: var(--floor); padding-top: calc(var(--section) + 1rem); }
.maintenance > .drawer-pull { position: absolute; top: 24px; left: var(--gutter); right: var(--gutter); }
.maintenance-inner { max-width: 760px; }

/* foto vergroten (berichtpagina) */
.gallery-main img { cursor: zoom-in; }
.gal-zoom { position: absolute; left: .75rem; bottom: .75rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: var(--ink); color: #fff; cursor: pointer; }
.gal-zoom:hover { background: var(--red); }
.gal-zoom svg { width: 24px; height: 24px; fill: currentColor; }
.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.lightbox::backdrop { background: rgba(10, 13, 17, .92); animation: lb-fade .25s ease both; }
.lightbox.is-closing, .lightbox.is-closing::backdrop { animation: lb-fade .18s ease reverse both; }
.lb-frame { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: clamp(64px, 8vw, 96px) clamp(16px, 9vw, 128px); }
.lb-img { box-sizing: content-box; max-width: 100%; max-height: calc(100vh - 2 * clamp(64px, 8vw, 96px)); object-fit: contain; border: clamp(6px, 1vw, 12px) solid #fff; border-radius: var(--radius); background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.97); transition: opacity .25s ease, transform .25s ease; }
.lb-img.is-in { opacity: 1; transform: none; }
.lb-count { position: absolute; left: 50%; bottom: clamp(16px, 3vw, 32px); translate: -50% 0; padding: .3rem .8rem; border-radius: var(--radius); background: var(--ink); color: #fff; font: 800 .95rem var(--head); }
.lb-count:empty { display: none; }
.lb-btn { position: absolute; display: grid; place-items: center; border: 0; border-radius: var(--radius); cursor: pointer; color: #fff; }
.lb-btn svg { fill: currentColor; }
.lb-close { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); width: 52px; height: 52px; background: rgba(255, 255, 255, .12); }
.lb-close:hover { background: rgba(255, 255, 255, .25); }
.lb-close svg { width: 28px; height: 28px; }
.lb-nav { top: 50%; translate: 0 -50%; width: clamp(52px, 5vw, 68px); height: clamp(72px, 8vw, 104px); background: var(--red); box-shadow: inset 0 -5px 0 var(--red-deep), 0 10px 24px rgba(0, 0, 0, .4); transition: background .15s, transform .1s; }
.lb-nav:hover { background: #c4170f; }
.lb-nav:active { transform: translateY(1px); }
.lb-nav svg { width: 40px; height: 40px; }
.lb-prev { left: clamp(8px, 2vw, 32px); }
.lb-prev svg { rotate: 180deg; }
.lb-next { right: clamp(8px, 2vw, 32px); }
.lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) { .lb-nav { top: auto; bottom: 16px; translate: none; width: 56px; height: 56px; } .lb-count { bottom: 30px; } }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lb-img, .lightbox::backdrop { transition: none; animation: none; } }

/* demonstratie aanvragen: links wat u kunt verwachten, rechts het formulier als een lade vol keuzes */
.demo-page { background: linear-gradient(90deg, var(--ink) 0 50%, var(--floor) 50% 100%); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.demo-side { padding: clamp(.5rem, 1vw, 1rem) clamp(1.5rem, 4vw, 4rem) clamp(.5rem, 1vw, 1rem) 0; color: #d5dbe1; }
.demo-side h1 { color: #fff; }
.demo-side .subtitle { color: #ff6a63; }
.demo-steps-title { color: #fff; font-size: 1.3rem; margin-top: 2.5rem; }
.demo-steps { list-style: none; margin: 0 0 2.5rem; padding: 0; counter-reset: stap; display: grid; gap: 1.4rem; }
.demo-steps li { counter-increment: stap; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; }
.demo-steps li::before { content: counter(stap); grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--red); box-shadow: inset 0 -4px 0 var(--red-deep); color: #fff; font: 900 1.5rem var(--head); }
.demo-steps strong { color: #fff; font: 800 1.08rem var(--head); align-self: end; }
.demo-steps span { font-size: .98rem; line-height: 1.5; }
.call-us { padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.call-us-title { margin: 0 0 .6rem; color: #fff; font: 800 1rem var(--head); }
.call-us a { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.call-us a:hover { color: #ff8a84; }
.call-us svg { width: 24px; height: 24px; fill: var(--red); flex: none; }
.call-us-phone { font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem) var(--head); letter-spacing: -.01em; margin-bottom: .4rem; }
.call-us-mail { font-weight: 700; word-break: break-all; }
.demo-form { position: relative; background: var(--card); padding: clamp(2.25rem, 2rem + 2vw, 3.25rem) clamp(1.25rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); border-bottom: 8px solid var(--frame); box-shadow: 0 24px 48px rgba(26, 32, 39, .12); }
.demo-form > .drawer-pull { position: absolute; top: 16px; left: clamp(1.25rem, 3vw, 2.75rem); right: clamp(1.25rem, 3vw, 2.75rem); }
.form--tiles .field--checks legend { font: 900 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.2 var(--head); letter-spacing: -.015em; margin-bottom: .9rem; }
.form--tiles .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.check--tile { position: relative; min-height: 64px; align-items: center !important; padding: .8rem .9rem .8rem 3.1rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); font: 700 .98rem/1.3 var(--head) !important; transition: border-color .15s, background .15s, box-shadow .15s; }
.check--tile:hover { border-color: var(--fg); }
.check--tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile-mark { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border: 2px solid var(--alu-2); border-radius: var(--radius); background: var(--card); }
.check--tile:has(input:checked) { border-color: var(--link); background: var(--red-tint); box-shadow: inset 4px 0 0 var(--red); }
.check--tile:has(input:checked) .tile-mark { border-color: var(--link); background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.6 5.4 12.5 4 13.9l5.5 5.5L20 8.9l-1.4-1.4z'/%3E%3C/svg%3E") center / 18px no-repeat; }
.check--tile:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.field--checks[data-invalid] .check--tile { border-color: #f0a29e; }
.fields-head { grid-column: 1 / -1; margin: 1.75rem 0 .1rem; padding-top: 1.5rem; border-top: 2px solid var(--floor); font: 900 1.3rem var(--head); letter-spacing: -.015em; }
.form--tiles .field--consent .check { font-size: .95rem !important; }
.btn--big { min-height: 58px; padding: 1rem 2rem 1.05rem; font-size: 1.12rem; }
.form--tiles .btn--big { width: 100%; }
@media (max-width: 960px) {
  .demo-page { background: var(--floor); padding-top: 0; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-side { background: var(--ink); margin: 0 calc(-1 * var(--gutter)); padding: clamp(2.5rem, 6vw, 3.5rem) var(--gutter); }
  .demo-form { margin-top: 2rem; }
}
@media (max-width: 560px) { .form--tiles .checks { grid-template-columns: 1fr; } }

/* delen (berichtpagina) */
.share { margin-top: 2.5rem; padding: 1.4rem 0 0; border-top: 2px solid var(--floor); }
.share-title { font: 900 1.15rem var(--head); margin: 0 0 .9rem; }
.share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.share-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1rem; border: 0; border-radius: var(--radius); background: var(--ink); color: #fff; font: 800 .92rem var(--head); text-decoration: none; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); transition: background .15s; }
.share-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.share-btn:hover { color: #fff; }
.share-btn--linkedin:hover { background: #0a66c2; }
.share-btn--facebook:hover { background: #1877f2; }
.share-btn--whatsapp:hover { background: #1c9e57; }
.share-btn--x:hover { background: #000; }
.share-btn--mail:hover, .share-btn--copy:hover, .share-btn--native:hover { background: var(--red); }
.share-status { margin: .6rem 0 0; font-weight: 700; color: #18794e; }
.share-status:empty { display: none; }
@media (max-width: 560px) { .share-btn span:not(.visually-hidden) { display: none; } .share-btn { padding: .55rem .8rem; } .share-btn--copy span, .share-btn--native span { display: inline !important; } }

/* beweging tijdens het scrollen: nieuwskaarten, kolommen en beeld/tekst stijgen mee met de pagina
   (alleen in browsers met scroll-gekoppelde animaties; anders schuiven ze één keer in via site.js) */
@keyframes wb-rise { from { opacity: .2; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .news-card, .intro .col, .columns .col, .mt-media, .mt-text, .images-grid figure { animation: wb-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .news-card:nth-child(3n + 2), .intro .col:nth-child(2), .columns .col:nth-child(2), .mt-text { animation-range: entry 8% cover 46%; }
    .news-card:nth-child(3n), .intro .col:nth-child(3) { animation-range: entry 16% cover 54%; }
  }
}

/* footer */
.site-footer { position: relative; background: var(--ink); color: #c4ccd4; font-size: .96rem; }
.footer-pull { position: absolute; top: -5px; left: 0; right: 0; height: 10px; border-radius: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 4vw, 4rem); padding: clamp(3.5rem, 3rem + 2vw, 5rem) 0 3rem; }
.footer-logo { width: 92px; border-radius: 50%; margin-bottom: 1.1rem; background: #fff; }
.footer-title { font: 900 1.2rem var(--head); color: #fff; margin: 0 0 1rem; letter-spacing: -.01em; }
.site-footer a { color: #fff; }
.site-footer .btn { margin-top: 1.25rem; color: #fff; }
.footer-meta { color: #8f9aa6; font-size: .88rem; }
.footer-links { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.1rem 0; font-size: .85rem; color: #8f9aa6; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }
.footer-bottom a { color: #c4ccd4; }
/* Windkracht-vermelding: bescheiden pil rechtsonder (op mobiel gecentreerd) */
.wk-credit { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; padding: .15rem .75rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: .8rem; line-height: 1.6; }
.wk-regel { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
/* Kleur van de Windkracht-wieken: kies wat bij het design past: wit #FFFFFF, zwart #111111, oranje #FF7A00 of blauw #0F1F4D */
:root { --wk-wieken: #FFFFFF; }
.wk-icoon { width: .85rem; height: .85rem; flex: none; color: var(--wk-wieken); transition: transform .3s; }
.footer-bottom .wk-regel a { color: #fff; font-weight: 700; text-decoration: none; }
.footer-bottom .wk-regel a:hover { text-decoration: underline; }
.wk-credit:hover .wk-icoon { transform: rotate(120deg); }
.wk-credit .login { display: inline-flex; align-items: center; gap: .25rem; padding-left: .55rem; border-left: 1px solid rgba(255, 255, 255, .18); color: #c4ccd4; text-decoration: none; }
.wk-credit .login:hover { color: #fff; text-decoration: underline; }
.wk-credit .login svg { width: .75rem; height: .75rem; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .wk-icoon { transition: none; } .wk-credit:hover .wk-icoon { transform: none; } }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :nth-child(2) { grid-column: 1 / -1; order: 3; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom-inner { justify-content: center; text-align: center; } .wk-credit { margin: .25rem auto 0; } }

@media print { .topbar, .site-header, .hero, .site-footer, .cta, .assortment { display: none; } }

/* Toestemmingskaart voor Google Analytics (de bouwer zet hem erbij als de G-code in het CMS staat) */
:root { --wb-consent-bg: var(--card); --wb-consent-color: var(--fg); --wb-consent-accent: var(--red); --wb-consent-accent-color: #ffffff; --wb-consent-border: var(--line); --wb-consent-radius: var(--radius); --wb-consent-button-radius: var(--radius); --wb-consent-font: var(--body); }

/* ---------- Donkere modus ----------
   Volgt het apparaat; met de knop (zon/maan) kiest de bezoeker zelf (data-theme op <html>).
   Alleen de thema-tokens wisselen; de huisstijl (rood, aluminium greep) blijft. */
:root[data-theme="dark"] {
  --bg: #111519;
  --card: #1a2027;
  --floor: #171c22;
  --line: #303943;
  --fg: #e9edf1;
  --steel: #a6b0bb;
  --ink: #1f262e;          /* donkere vlakken (menu, footer, kast) iets lichter dan de pagina */
  --ink-2: #2b343e;
  --frame: #3d4854;
  --link: #ff6159;         /* rood als tekst: lichter, goed leesbaar op donker */
  --red-tint: #3a1715;
  --img-bg: #f3f5f7;       /* productfoto's (witte achtergrond) iets minder fel */
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --bg: #111519;
  --card: #1a2027;
  --floor: #171c22;
  --line: #303943;
  --fg: #e9edf1;
  --steel: #a6b0bb;
  --ink: #1f262e;          /* donkere vlakken (menu, footer, kast) iets lichter dan de pagina */
  --ink-2: #2b343e;
  --frame: #3d4854;
  --link: #ff6159;         /* rood als tekst: lichter, goed leesbaar op donker */
  --red-tint: #3a1715;
  --img-bg: #f3f5f7;       /* productfoto's (witte achtergrond) iets minder fel */
  color-scheme: dark;
  }
}
.theme-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
.logo .logo-dark { display: none; }
[data-theme="dark"]:not(.own-logo) .logo img:not(.logo-dark) { display: none; }
[data-theme="dark"]:not(.own-logo) .logo .logo-dark { display: block; }
[data-theme="dark"].own-logo .logo img:not(.logo-dark) { background: #fff; padding: 6px 10px; border-radius: var(--radius); }
[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
/* productfoto's hebben een witte achtergrond (mengen met 'multiply'): op donker een lichte fotoplaat */
[data-theme="dark"] .gallery-main, [data-theme="dark"] .mt-media--image, [data-theme="dark"] .images-grid figure { background: var(--img-bg); }
[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
[data-theme="dark"] .btn--ghost { box-shadow: inset 0 0 0 2px var(--fg); }
[data-theme="dark"] .btn--ghost:hover { background: var(--fg); color: var(--bg); }