/* Noviz — stijl v4 (11 sep 2026)
   Opzet naar 1komma5: donkere en witte vlakken om en om, grote koppen, 3D-productbeelden,
   afgeronde kaarten, één oranje accent. Bron: bron/stijl.css → gekopieerd door bron/bouw.mjs. */

/* Lettertypen zelf gehost (fonts/, variabele woff2, latin): geen verzoek naar Google Fonts, font-display: swap tegen onzichtbare tekst. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/montserrat-latin.woff2?v=311d352d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin.woff2?v=b2c9031d') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --oranje: #f48a3c;
  --oranje-donker: #d9752b;
  --oranje-licht: #fff1e6;
  --inkt: #1c1c1c;
  --inkt-2: #262626;
  --inkt-3: #333333;
  --grijs-900: #2f3136;
  --grijs-700: #55585f;
  --grijs-500: #7a7e87;
  --grijs-300: #d6d8dd;
  --grijs-200: #e8e9ec;
  --grijs-100: #f3f4f6;
  --grijs-50: #f8f8f9;
  --wit: #ffffff;
  --groen: #1f9d61;
  --kop: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --tekst: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --schaduw: 0 10px 40px rgba(20, 20, 20, .10);
  --schaduw-zacht: 0 2px 12px rgba(20, 20, 20, .06);
  --wrap: 1200px;
  --sectie: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--tekst); font-size: 17px; line-height: 1.6; color: var(--inkt); background: var(--wit); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--kop); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(38px, 6vw, 72px); }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--oranje); color: var(--inkt); padding: 10px 16px; border-radius: 8px; z-index: 1000; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; }
section { scroll-margin-top: 90px; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--grijs-700); max-width: 640px; }
.donker .lead, .donker .sub { color: rgba(255,255,255,.72); }
.sub { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oranje); margin-bottom: 14px; display: block; }
.accent { color: var(--oranje); }
.midden { text-align: center; }
.midden .lead { margin-inline: auto; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop.primair { background: var(--oranje); color: var(--inkt); }
.knop.primair:hover { background: var(--oranje-donker); }
.knop.secundair { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop.secundair:hover { background: var(--inkt); color: var(--wit); }
.donker .knop.secundair { color: var(--wit); border-color: rgba(255,255,255,.7); }
.donker .knop.secundair:hover { background: var(--wit); color: var(--inkt); }
.knop.wit { background: var(--wit); color: var(--inkt); }
.knop.wit:hover { background: var(--grijs-100); }
.knop.groot { padding: 18px 32px; font-size: 17px; }
.knop.klein { padding: 10px 18px; font-size: 14px; }
.acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pijl::after { content: "→"; transition: transform .15s ease; }
.pijl:hover::after { transform: translateX(3px); }

/* Banner + kop */
.banner { background: var(--oranje); color: var(--inkt); font-size: 14px; font-weight: 500; text-align: center; padding: 8px 0; }
.banner a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kop { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--grijs-200); }
.nav { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo img { height: 44px; width: auto; }
.menu { display: flex; align-items: center; gap: 20px; flex: 1; }
.menu > ul { display: flex; gap: 4px; flex: 1; justify-content: center; }
.menu > ul a { display: block; padding: 10px 12px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--grijs-900); white-space: nowrap; }
.menu > ul a:hover, .menu > ul a[aria-current="page"] { background: var(--grijs-100); color: var(--inkt); }
.menu-knop { display: none; margin-left: auto; padding: 10px 16px; border: 2px solid var(--inkt); border-radius: 999px; background: none; font-weight: 600; }
.zoek { position: relative; }
.zoek input { width: 220px; padding: 10px 14px 10px 36px; border: 1px solid var(--grijs-300); border-radius: 999px; background: var(--grijs-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355585f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center no-repeat; font-size: 14px; }
.zoek input:focus { background-color: var(--wit); border-color: var(--inkt); outline: none; }
.zoek-lijst { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--wit); border: 1px solid var(--grijs-200); border-radius: var(--r-md); box-shadow: var(--schaduw); overflow: hidden; z-index: 200; }
.zoek-lijst a { display: block; padding: 10px 14px; border-bottom: 1px solid var(--grijs-100); }
.zoek-lijst a:hover { background: var(--grijs-50); }
.zoek-lijst b { display: block; font-size: 15px; }
.zoek-lijst span { font-size: 13px; color: var(--grijs-500); }
@media (max-width: 1040px) {
  .menu-knop { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); border-bottom: 1px solid var(--grijs-200); flex-direction: column; align-items: stretch; padding: 16px 20px 24px; gap: 16px; box-shadow: var(--schaduw); }
  .menu.open { display: flex; }
  .menu > ul { flex-direction: column; gap: 0; }
  .menu > ul a { padding: 12px 8px; font-size: 17px; border-bottom: 1px solid var(--grijs-100); border-radius: 0; }
  .zoek input, .zoek input:focus { width: 100%; }
  .zoek-lijst { left: 0; right: 0; width: auto; }
  .menu .knop { width: 100%; }
}

/* Secties */
.sectie { padding-block: var(--sectie); }
.donker { background: var(--inkt); color: var(--wit); }
.donker h1, .donker h2, .donker h3 { color: var(--wit); }
.licht { background: var(--grijs-50); }
.sectie-kop { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.sectie-kop.midden { margin-inline: auto; }
.rooster { display: grid; gap: 24px; }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .r3, .r4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .r2, .r3, .r4 { grid-template-columns: 1fr; } }

/* Hero */
.hero { position: relative; background: var(--inkt); color: var(--wit); overflow: hidden; isolation: isolate; }
.hero-beeld { position: absolute; inset: 0; z-index: -1; }
.hero-beeld picture { display: contents; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .55; }
.hero-beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,28,28,.92) 0%, rgba(28,28,28,.72) 45%, rgba(28,28,28,.25) 100%); }
.hero .wrap { min-height: min(78vh, 720px); display: grid; align-content: center; padding-block: clamp(64px, 10vw, 120px); }
.hero h1 { max-width: 760px; }
.hero .lead { color: rgba(255,255,255,.8); }
.hero-punten { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 32px; font-size: 15px; color: rgba(255,255,255,.85); }
.hero-punten li::before { content: "✓"; color: var(--oranje); font-weight: 700; margin-right: 8px; }
.hero.klein .wrap { min-height: 0; padding-block: clamp(56px, 8vw, 96px); }
.hero.product { background: var(--inkt); }
.hero.product .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero.product .product-beeld { background: radial-gradient(60% 60% at 50% 50%, rgba(244,138,60,.28), transparent 70%); display: grid; place-items: center; }
.hero.product .product-beeld img { width: min(100%, 520px); border-radius: var(--r-lg); box-shadow: var(--schaduw); }
.hero.product .wrap.zonder-beeld { grid-template-columns: minmax(0, 760px); }
@media (max-width: 900px) { .hero.product .wrap { grid-template-columns: 1fr; } .hero.product .product-beeld img { width: min(100%, 420px); } }

/* Cijferstrook */
.cijfers { background: var(--wit); border-bottom: 1px solid var(--grijs-200); }
.cijfers .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 28px; }
.cijfer b { display: block; font-family: var(--kop); font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.cijfer span { font-size: 14px; color: var(--grijs-700); }
@media (max-width: 700px) { .cijfers .wrap { grid-template-columns: repeat(2, 1fr); } }

/* Kaarten */
.kaart { background: var(--wit); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--schaduw-zacht); border: 1px solid var(--grijs-200); transition: transform .2s ease, box-shadow .2s ease; }
.kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.kaart h3 { margin-top: 12px; }
.kaart p { color: var(--grijs-700); font-size: 15.5px; }
.kaart .knop { margin-top: 18px; }
.donker .kaart { background: var(--inkt-2); border-color: rgba(255,255,255,.08); color: var(--wit); }
.donker .kaart p { color: rgba(255,255,255,.7); }

/* Werksoorten (home) */
.werksoort { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; position: relative; }
/* De hele kaart is klikbaar, foto en tekst ook (JD, 16 september 2026: "ik kan ook
   niet op de foto klikken om door te gaan"). De knop houdt zijn eigen link; die
   rekt zich met ::after over de kaart uit. Zo blijft de opmaak geldig: geen link
   in een link. */
/* WEG op 24 september 2026. Dit klikvlak lag wel over de hele kaart, maar een
   klik erop activeerde de link niet: de browser wees de knop aan als doel en deed
   vervolgens niets. Gemeten met een echte browser: met dit vlak erin werkt de foto
   niet, zonder dit vlak wel. De foto is nu zelf een link (.kaart-beeld). */
/* .werksoort .knop::after { content: ""; position: absolute; inset: 0; z-index: 1; } */
/* Binnen de kaart staat NIETS op position: relative. Stond dat er wel op de foto
   en de tekst, dan rekt het klikvlak zich alleen over de tekst uit en blijft de
   foto dood (fout van 16 september 2026, door JD gevonden). De kaart zelf is de
   enige met position: relative, zodat inset: 0 over de hele kaart gaat. */
.werksoort .knop { z-index: 2; }
/* De foto is zelf een link (JD, 24 september 2026: "op noviz.nl doet alleen de
   knop het. niet op het klikken van de foto"). Het klikvlak van de knop dekt de
   hele kaart, maar een klik daarop activeerde de link niet. De foto vangt nu zijn
   eigen klik op. Die link is aria-hidden en niet met de tab te bereiken, zodat een
   schermlezer en het toetsenbord maar een link per kaart tegenkomen: de knop. */
/* De hele kaart is klikbaar (JD, 24 september 2026: "als alleen de foto klikbaar
   is en de knop dan moet het ook niet lijken of je kan klikken op de tekst. maar
   de tekst moet ook klikbaar zijn"). Dit is een ECHT element en geen ::after: een
   pseudo-element vangt de klik wel op maar activeert de link niet. Dat is op
   24 september 2026 in een echte browser gemeten. De knop ligt erboven en houdt
   zijn eigen hover en focus. */
.kaart-vlak { position: absolute; inset: 0; z-index: 1; }
.werksoort, .product-kaart, .keuze { cursor: pointer; position: relative; }
.werksoort .knop, .product-kaart .knop, .keuze .knop { position: relative; z-index: 2; }
.werksoort img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.werksoort > div { padding: 24px 28px 28px; }
.werksoort .knop { margin-top: 12px; }

/* Productkaarten */
.product-kaart { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
/* Zelfde klikvlak als bij .werksoort (JD, 16 september 2026 21:11: "pagina
   verduurzamen zijn fotos niet klikbaar"). Binnen de kaart staat niets op
   position: relative, anders ankert inset: 0 aan het verkeerde element. */
/* WEG op 24 september 2026. Dit klikvlak lag wel over de hele kaart, maar een
   klik erop activeerde de link niet: de browser wees de knop aan als doel en deed
   vervolgens niets. Gemeten met een echte browser: met dit vlak erin werkt de foto
   niet, zonder dit vlak wel. De foto is nu zelf een link (.kaart-beeld). */
/* .product-kaart .knop::after { content: ""; position: absolute; inset: 0; z-index: 1; } */
.product-kaart .knop { z-index: 2; }
.product-kaart figure { margin: 0; background: linear-gradient(180deg, var(--grijs-100), var(--grijs-50)); aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; }
.product-kaart figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-kaart:hover figure img { transform: scale(1.04); }
.product-kaart > div { padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.product-kaart h3 { margin-top: 0; }
.product-kaart .prijs { font-weight: 600; color: var(--inkt); margin-top: auto; padding-top: 12px; font-size: 15px; }
.product-kaart .prijs small { display: block; font-weight: 400; color: var(--grijs-500); font-size: 13px; }
.product-kaart .knop { align-self: flex-start; }

/* Keuzes (merken) */
.keuze { padding: 0; overflow: hidden; position: relative; }
.keuze figure { margin: 0; background: linear-gradient(180deg, var(--grijs-100), var(--wit)); aspect-ratio: 4/3; overflow: hidden; }
.keuze figure img { width: 100%; height: 100%; object-fit: cover; }
.keuze > div { padding: 22px 26px 26px; }
.keuze .lijn { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oranje-donker); background: var(--oranje-licht); padding: 5px 10px; border-radius: 999px; }
.keuze.nadruk { border-color: var(--oranje); box-shadow: 0 0 0 3px rgba(244,138,60,.18), var(--schaduw-zacht); }
.keuze ul { margin: 12px 0 16px; color: var(--grijs-700); font-size: 15px; }
.keuze li { padding: 5px 0 5px 24px; position: relative; }
.keuze li::before { content: "✓"; position: absolute; left: 0; color: var(--groen); font-weight: 700; }
.keuze .prijs { font-family: var(--kop); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.keuze .prijs small { display: block; font-family: var(--tekst); font-weight: 400; font-size: 13px; color: var(--grijs-500); letter-spacing: 0; }
.noot { font-size: 14px; color: var(--grijs-500); margin-top: 20px; max-width: 760px; }

/* Saldering-band */
.saldering { background: var(--oranje); color: var(--inkt); }
.saldering .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.saldering h2 { color: var(--inkt); }
.saldering .lead { color: rgba(28,28,28,.8); }
.saldering .knop.primair { background: var(--inkt); color: var(--wit); }
.saldering .knop.primair:hover { background: var(--inkt-3); }
.tijdlijn { background: rgba(28,28,28,.08); border-radius: var(--r-lg); padding: 28px; }
.tijdlijn li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(28,28,28,.14); }
.tijdlijn li:last-child { border-bottom: 0; }
.tijdlijn b { font-family: var(--kop); font-size: 20px; min-width: 64px; }
@media (max-width: 900px) { .saldering .wrap { grid-template-columns: 1fr; } }

/* Klantreis */
.stappen { counter-reset: stap; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stap { position: relative; padding: 28px 24px 24px; border-radius: var(--r-lg); background: var(--inkt-2); border: 1px solid rgba(255,255,255,.08); }
.stap::before { counter-increment: stap; content: "0" counter(stap); font-family: var(--kop); font-size: 40px; font-weight: 800; color: var(--oranje); line-height: 1; display: block; margin-bottom: 16px; }
.stap h3 { font-size: 20px; }
.stap p { color: rgba(255,255,255,.7); font-size: 15px; }
.wit .stap { background: var(--wit); border-color: var(--grijs-200); }
.wit .stap p { color: var(--grijs-700); }
@media (max-width: 900px) { .stappen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stappen { grid-template-columns: 1fr; } }

/* Voordelen */
.voordeel { display: flex; gap: 16px; align-items: flex-start; }
.voordeel h4 { margin-bottom: 4px; }
.voordeel p { color: var(--grijs-700); font-size: 15px; }
.donker .voordeel p { color: rgba(255,255,255,.7); }

/* Reviews */
.review { display: flex; flex-direction: column; gap: 14px; }
.sterren { color: var(--oranje); letter-spacing: 2px; font-size: 18px; }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.55; flex: 1; }
.review footer { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--inkt); color: var(--wit); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.donker .avatar { background: var(--oranje); color: var(--inkt); }
.review footer b { display: block; }
.review footer span { color: var(--grijs-500); }
.donker .review footer span { color: rgba(255,255,255,.55); }
.score { display: inline-flex; align-items: center; gap: 12px; background: var(--wit); color: var(--inkt); border-radius: 999px; padding: 8px 18px 8px 8px; font-weight: 600; font-size: 15px; box-shadow: var(--schaduw-zacht); }
.score b { font-family: var(--kop); font-size: 22px; background: var(--oranje); border-radius: 999px; padding: 6px 12px; }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--grijs-200); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-family: var(--kop); font-weight: 700; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--inkt); display: grid; place-items: center; font-weight: 500; transition: transform .2s ease; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--grijs-700); max-width: 720px; }

/* Slot-CTA + voet */
.slot { background: var(--oranje); color: var(--inkt); padding-block: var(--sectie); }
.slot h2 { color: var(--inkt); }
.slot p { max-width: 560px; font-size: 18px; color: rgba(28,28,28,.85); }
.slot .knop.primair { background: var(--inkt); color: var(--wit); }
.slot .knop.primair:hover { background: var(--inkt-3); }
.slot .knop.secundair { border-color: var(--inkt); }
.slot-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.slot-punten { background: rgba(255,255,255,.35); border-radius: var(--r-lg); padding: 24px 28px; font-weight: 500; }
.slot-punten li { padding: 8px 0 8px 28px; position: relative; }
.slot-punten li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
@media (max-width: 800px) { .slot-grid { grid-template-columns: 1fr; } }
.voet { background: var(--inkt); color: rgba(255,255,255,.75); padding: 64px 0 64px; font-size: 15px; }
.voet-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr 1.2fr; gap: 32px; }
.voet b { color: var(--wit); display: block; margin-bottom: 14px; font-family: var(--kop); }
.voet li { padding: 4px 0; }
.voet a:hover { color: var(--oranje); }
.voet img { margin-bottom: 18px; }
.voet .werkgebied { list-style: none; padding: 0; margin: 0 0 18px; }
.voet .werkgebied li { break-inside: avoid; padding: 2px 0; }
.voet .werkgebied a { padding: 2px 0; }
.voet .werkgebied-noot { margin: 0 0 18px; }
@media (max-width: 900px) { .voet .werkgebied { columns: 2; column-gap: 20px; } }
.gecontroleerd-regel { padding: 0 0 32px; }
.gecontroleerd { margin: 0; font-size: 14px; color: var(--grijs-500); }
.erkend-zegel { margin: 10px 0 0; font-weight: 600; }
.voet-regel { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .voet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voet-grid { grid-template-columns: 1fr; } }

/* Aanbod-flow (aanbod.html) */
.aanbod { min-height: 70vh; }
.aanbod-stap { display: none; }
.aanbod-stap.actief { display: block; }
.voortgang { display: flex; gap: 8px; margin-bottom: 32px; font-size: 14px; color: var(--grijs-500); }
.voortgang span { padding: 6px 14px; border-radius: 999px; background: var(--grijs-100); }
.voortgang span.actief { background: var(--inkt); color: var(--wit); }
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border: 2px solid var(--grijs-200); border-radius: var(--r-lg); background: var(--wit); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.tegel:hover { border-color: var(--inkt); transform: translateY(-2px); box-shadow: var(--schaduw-zacht); }
.tegel[aria-pressed="true"] { border-color: var(--oranje); background: var(--oranje-licht); }
.tegel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 8px; }
.tegel b { font-family: var(--kop); font-size: 18px; }
.tegel span { font-size: 14px; color: var(--grijs-700); }
@media (max-width: 800px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tegels { grid-template-columns: 1fr; } }

/* Formulier */
.formulier { background: var(--wit); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); border: 1px solid var(--grijs-200); box-shadow: var(--schaduw-zacht); }
.formulier.donker { background: var(--inkt-2); border-color: rgba(255,255,255,.1); }
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.veld[hidden] { display: none; }   /* verborgen vervolgvraag (bijv. "Anders, namelijk") echt verbergen */
.veld label { font-weight: 600; font-size: 14px; }
.veld input, .veld select, .veld textarea { padding: 13px 14px; border: 1px solid var(--grijs-300); border-radius: var(--r-sm); background: var(--wit); font-size: 16px; width: 100%; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--inkt); outline: none; box-shadow: 0 0 0 3px rgba(244,138,60,.25); }
.formulier.donker .veld input, .formulier.donker .veld select, .formulier.donker .veld textarea { background: var(--inkt); border-color: rgba(255,255,255,.18); color: var(--wit); }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.veld-rij.adres { grid-template-columns: 2fr 1fr; }
/* Postcode en huisnummer blijven ook op een telefoon naast elkaar: samen zijn ze één adres en
   het scheelt de bezoeker een regel. De rij eronder (e-mail en telefoon) gaat wel onder elkaar. */
@media (max-width: 560px) { .veld-rij { grid-template-columns: 1fr; } .veld-rij.adres { grid-template-columns: 1.6fr 1fr; gap: 12px; } }
.opties { display: flex; flex-wrap: wrap; gap: 8px; }
.opties label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--grijs-300); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500; }
.opties label:has(input:checked) { border-color: var(--oranje); background: var(--oranje-licht); }
.opties input { accent-color: var(--oranje); }
.form-noot { font-size: 13px; color: var(--grijs-500); margin-top: 14px; }
.honing { position: absolute; left: -9999px; }
.fout { background: #fff2f0; border: 1px solid #f3b3aa; color: #8a1f11; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 16px; }

/* Split-blokken (tekst + beeld) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split img { border-radius: var(--r-xl); box-shadow: var(--schaduw); }
.split.omgekeerd > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.omgekeerd > :first-child { order: 0; } }
.checks li { padding: 8px 0 8px 32px; position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--oranje); color: var(--inkt); font-size: 13px; font-weight: 800; display: grid; place-items: center; }

/* Werkgebied */
.plaatsen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.plaatsen li { padding: 8px 14px; border-radius: 999px; background: var(--grijs-100); font-size: 14px; font-weight: 500; }
.donker .plaatsen li { background: rgba(255,255,255,.08); }

/* Tekstpagina's */
.tekst { max-width: 760px; }
.tekst h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 1.6em; }
.tekst ul { list-style: disc; padding-left: 22px; }
.tekst li { margin: 6px 0; }
.modelformulier { margin-top: 18px; padding: 24px 28px; border: 1px solid var(--grijs-200); border-radius: var(--r-lg); background: var(--wit); }
.modelformulier p:first-child { margin-top: 0; }
.modelformulier p:last-child { margin-bottom: 0; }
/* Open punt voor een besluit: alleen in een concept, controle-publicatie laat hem niet live gaan. */
.open-jd { background: #fff3a8; color: var(--inkt); outline: 2px dashed #b58900; outline-offset: 1px; padding: 0 4px; font-weight: 600; }

/* Verschijnen bij scrollen */
.in { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.in.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .in { opacity: 1; transform: none; transition: none; } .knop, .kaart, .product-kaart figure img { transition: none; } html { scroll-behavior: auto; } }

/* ---- v4.1: menu met submenu, telefoon in de kop, home met drie kolommen, kengetallen ---- */
.menu > ul > li { position: relative; }
.menu .submenu { display: none; position: absolute; left: 0; top: calc(100% + 6px); min-width: 200px; background: var(--wit); border: 1px solid var(--grijs-200); border-radius: var(--r-md); box-shadow: var(--schaduw); padding: 8px; z-index: 200; }
.menu .submenu a { padding: 9px 12px; border-radius: 8px; font-size: 14.5px; }
.heeft-sub:hover .submenu, .heeft-sub:focus-within .submenu { display: block; }
.heeft-sub > a::after { content: " ▾"; font-size: 11px; opacity: .6; }
.tel { font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--inkt); }
.tel:hover { color: var(--oranje-donker); }
.wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--inkt); }
.wa:hover { color: var(--groen); }
.wa-icoon { flex: none; color: var(--groen); }
.knop.wa { border-color: var(--groen); color: var(--groen); }
.knop.wa:hover { background: var(--groen); color: var(--wit); }
.knop.wa:hover .wa-icoon { color: var(--wit); }
.wa-tekst { color: var(--groen); }
@media (max-width: 1240px) { .tel, .wa { display: none; } }
@media (max-width: 1040px) {
  .tel { display: block; padding: 12px 8px; font-size: 17px; }
  .wa { display: inline-flex; padding: 12px 8px; font-size: 17px; }
  .menu .submenu { display: none; position: static; box-shadow: none; border: 0; padding: 0 0 8px 16px; }
  .heeft-sub.open .submenu { display: block; }
  .menu .submenu a { border-bottom: 0; font-size: 16px; padding: 8px; }
}
.hero.drie .wrap { min-height: 0; padding-block: clamp(56px, 8vw, 96px) clamp(140px, 16vw, 200px); text-align: center; justify-items: center; }
.hero.drie h1 { max-width: none; }
.hero.drie .lead { margin-inline: auto; max-width: 720px; }
.kolommen { margin-top: clamp(-120px, -12vw, -150px); position: relative; z-index: 2; padding-bottom: clamp(40px, 5vw, 64px); }
.kolommen .werksoort { box-shadow: var(--schaduw); }
.werksoort p { flex: 1; }
.kengetallen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kengetallen li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: 12px 18px; min-width: 130px; }
.kengetallen span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.kengetallen b { font-family: var(--kop); font-size: 20px; }
.product-beeld { position: relative; }
.beeld-noot { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); background: var(--oranje); color: var(--inkt); border-radius: 999px; padding: 10px 20px; white-space: nowrap; box-shadow: var(--schaduw); text-align: center; line-height: 1.2; }
.beeld-noot b { display: block; font-family: var(--kop); font-size: 16px; }
.beeld-noot span { font-size: 12px; }
.voordeel.genummerd > b { font-family: var(--kop); font-size: 28px; color: var(--oranje); min-width: 44px; line-height: 1; padding-top: 2px; }
.veld label small { font-weight: 400; color: var(--grijs-500); }
.sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- v4.2: strakke lijniconen i.p.v. emoji, logo groter, saldering-cijfers op één regel ---- */
.logo img { height: 56px; }
@media (max-width: 600px) { .logo img { height: 46px; } }
.tijdlijn b { min-width: 92px; white-space: nowrap; }

/* ---- v4.3: logo groter en scherp, kop volledig wit (geen grijze waas boven donkere vlakken) ---- */
.kop { background: var(--wit); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav { min-height: 88px; }
.logo img { height: 66px; image-rendering: -webkit-optimize-contrast; }
@media (max-width: 1040px) { .logo img { height: 56px; } .nav { min-height: 76px; } }
@media (max-width: 600px) { .logo img { height: 48px; } }

/* ---- v4.4 (11 sep 2026): SEO en toegankelijkheid — kopniveaus, contrast (WCAG AA) en zichtbare focus op oranje vlakken ---- */
:root { --grijs-500: #666a73; --oranje-tekst: #a84f14; }
.werksoort h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; margin-top: 12px; }
.voordeel h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.sub, .keuze .lijn { color: var(--oranje-tekst); }
.hero .sub { color: var(--oranje); }
.voordeel.genummerd > b { color: var(--oranje-donker); }
.donker .voordeel.genummerd > b { color: var(--oranje); }
.banner :focus-visible, .saldering :focus-visible, .slot :focus-visible, .knop.primair:focus-visible { outline-color: var(--inkt); }
.zoek input:focus { box-shadow: 0 0 0 3px rgba(244,138,60,.35); }
.stappen.drie { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .stappen.drie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stappen.drie { grid-template-columns: 1fr; } }

/* Landingspagina's voor Ads (thuisbatterij-, laadpaal-, groepenkast-aanbod): één actie, geen banner, menu of zoekbalk */
.landing .banner { display: none; }
/* 19 okt 2026 (variant): op een telefoon of tablet (tot 1040 px) hebben aanbodpagina's hetzelfde hamburgermenu met Contact als de andere pagina's.
   Op een computer blijft de kopbalk met telefoon, WhatsApp en de knop zoals hij was. */
@media (min-width: 1041px) {
  .landing .menu > ul, .landing .zoek, .landing .menu-knop { display: none; }
  .landing .menu { display: flex; position: static; flex-direction: row; justify-content: flex-end; padding: 0; box-shadow: none; border: 0; background: none; }
  .landing .menu .knop { width: auto; }
}
@media (max-width: 480px) { .aanbod form .knop.groot[type="submit"] { padding-inline: 14px; white-space: normal; line-height: 1.2; } }
.landing-prijs > div { padding: 26px; }
.landing-prijs h3 { margin-top: 10px; }
.landing-stappen { grid-template-columns: 1fr; gap: 14px; }
.landing-stappen .stap { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; padding: 18px 20px; }
.landing-stappen .stap::before { grid-row: 1 / 3; margin: 0; font-size: 28px; padding-top: 2px; }
.landing-stappen .stap h3 { grid-column: 2; margin-bottom: 4px; }
.landing-stappen .stap p { grid-column: 2; margin: 0; }

/* Kennisartikelen: leesbare kolom, tabellen, kort antwoord bovenaan, aanbodblok en 'lees ook' */
.artikel-inhoud { max-width: 780px; margin-inline: auto; }
.artikel-inhoud h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 1.6em; }
.artikel-inhoud h3 { font-size: 20px; margin-top: 1.4em; }
.artikel-inhoud p, .artikel-inhoud li { line-height: 1.7; }
.artikel-inhoud ul, .artikel-inhoud ol { padding-left: 24px; margin: 0 0 1.2em; }
.artikel-inhoud ul { list-style: disc; }
.artikel-inhoud ol { list-style: decimal; }
.artikel-inhoud li { margin-bottom: 8px; }
.artikel-inhoud p a, .artikel-inhoud li a { color: var(--oranje-donker); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.artikel-meta { font-size: 14px; color: var(--grijs-500); margin-bottom: 20px; }
.antwoord { background: var(--oranje-licht); border-left: 4px solid var(--oranje); border-radius: var(--r-sm); padding: 18px 22px; margin: 0 0 2em; line-height: 1.65; }
.tabel { overflow-x: auto; margin: 0 0 1.5em; -webkit-overflow-scrolling: touch; }
.artikel-inhoud table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; }
.artikel-inhoud th, .artikel-inhoud td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--grijs-200); vertical-align: top; }
.artikel-inhoud th { background: var(--grijs-50); font-weight: 600; }
.artikel-cta { background: var(--inkt); color: var(--wit); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); margin: 2.5em 0; }
.artikel-cta h2 { color: var(--wit); margin-top: 0; }
.artikel-cta p { color: rgba(255,255,255,.78); max-width: 620px; }
.artikel-cta .knop.secundair { color: var(--wit); border-color: rgba(255,255,255,.7); }
.artikel-cta .knop.secundair:hover { background: var(--wit); color: var(--inkt); }
.artikel-inhoud .faq { margin-inline: 0; }
.lees-ook { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--grijs-200); }
.lees-ook h2 { font-size: 22px; margin-top: 0; }
.lees-ook ul { list-style: none; padding: 0; margin: 1em 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lees-ook li { margin: 0; max-width: 100%; }
.lees-ook li a { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 6px; background: var(--oranje-licht); border: 1px solid #f7d2b3; border-radius: 4px; color: var(--inkt); font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.lees-ook li a:hover { background: #ffe2c9; border-color: var(--oranje-donker); }
.lees-ook li a:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; background: #ffe2c9; border-color: var(--oranje-donker); }

/* ---- v5 UX ---- (11 sep 2026: leesbaarheid en ritme, consistente knoppen en kaarten, formulierstaten, mobiel menu, focus, motion) */
:root { --ring: 0 0 0 4px rgba(244,138,60,.35); --ease-uit: cubic-bezier(.2,.7,.2,1); --rood: #b3261e; --rood-licht: #fdf0ee; --groen-licht: #e9f7ef; }
::selection { background: var(--oranje); color: var(--inkt); }
body { caret-color: var(--oranje-donker); }
h1, h2, h3 { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }
h1 { letter-spacing: -.03em; }
.lead { line-height: 1.5; }
.sectie-kop > .lead { margin-top: 4px; }
.sectie-kop { margin-bottom: clamp(36px, 5vw, 64px); }
.noot { max-width: 620px; line-height: 1.55; }
.kaart p, .stap p, .voordeel p { line-height: 1.55; }
.faq details p { line-height: 1.6; }
.tekst p, .tekst li { line-height: 1.65; }
.tekst a, .form-noot a, .faq details p a, .hero .lead a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tekst a:hover, .form-noot a:hover { color: var(--oranje-donker); }
:target, :focus { scroll-margin-top: 110px; scroll-margin-bottom: 100px; }
#inhoud:focus { outline: none; }

/* Knoppen: één maat, zichtbare staten, altijd minimaal 44px hoog op aanraakschermen */
.knop { min-height: 48px; transition: transform .18s var(--ease-uit), background .18s var(--ease-uit), color .18s var(--ease-uit), border-color .18s var(--ease-uit), box-shadow .18s var(--ease-uit); }
.knop.klein { min-height: 40px; }
.knop.groot { min-height: 56px; }
.knop:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(20,20,20,.35); }
.knop:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .08s; }
.knop:focus-visible { outline: none; box-shadow: var(--ring); }
.knop.primair:focus-visible, .saldering .knop:focus-visible, .slot .knop:focus-visible { box-shadow: 0 0 0 3px var(--wit), 0 0 0 6px var(--inkt); }
.donker .knop:focus-visible, .hero .knop:focus-visible { box-shadow: 0 0 0 3px var(--inkt), 0 0 0 6px var(--oranje); }
.knop[disabled], .knop[aria-busy="true"] { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.knop .spin { width: 18px; height: 18px; border: 2.5px solid rgba(28,28,28,.25); border-top-color: var(--inkt); border-radius: 50%; animation: draai .8s linear infinite; display: none; }
.knop[aria-busy="true"] .spin { display: inline-block; }
@keyframes draai { to { transform: rotate(360deg); } }
.pijl::after { margin-left: 2px; }
.pijl:hover::after { transform: translateX(4px); }
.menu > ul a { transition: background .15s var(--ease-uit), color .15s var(--ease-uit); }
.menu > ul a:focus-visible { outline: none; box-shadow: var(--ring); }
.tel:focus-visible, .logo:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.menu-knop { min-height: 44px; }
.menu-knop:hover { background: var(--grijs-100); }
.banner a { display: inline-block; padding: 3px 0; }
.voet a { display: inline-block; padding: 3px 0; transition: color .15s var(--ease-uit); }
.voet ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet a:focus-visible, .banner a:focus-visible { outline-offset: 2px; border-radius: 4px; }

/* Kaarten: alleen kaarten die ergens heen gaan tillen op; informatiekaarten blijven stil */
.kaart:hover { transform: none; box-shadow: var(--schaduw-zacht); }
a.kaart:hover, .kaart.werksoort:hover, .kaart.product-kaart:hover, .kaart.keuze:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.kaart.keuze.nadruk:hover { box-shadow: 0 0 0 3px rgba(244,138,60,.18), var(--schaduw); }
.kaart > h3:first-child { margin-top: 0; }
a.kaart { position: relative; display: block; padding-right: 64px; }
a.kaart::after { content: "→"; position: absolute; right: 24px; top: 26px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--inkt); display: grid; place-items: center; font-weight: 600; transition: transform .2s var(--ease-uit), background .2s var(--ease-uit), border-color .2s var(--ease-uit); }
a.kaart:hover::after { background: var(--oranje); border-color: var(--oranje); transform: translateX(3px); }
a.kaart:focus-visible { outline: none; box-shadow: var(--ring), var(--schaduw); }
.werksoort > div { display: flex; flex-direction: column; }
.werksoort .knop { align-self: flex-start; margin-top: 16px; }
.product-kaart p { flex: 1; }
.product-kaart figure img { transition: transform .5s var(--ease-uit); }
.keuze > div { display: flex; flex-direction: column; }
.keuze ul { flex: 1; }
.keuze .prijs { margin-bottom: 16px; }
.keuze:not(.nadruk) .knop.primair { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.keuze:not(.nadruk) .knop.primair:hover { background: var(--inkt); color: var(--wit); }
/* Staat er in een rij niemand voorop (groepenkast: zelfde prijs, de klant kiest
   zelf), dan blijven de knoppen gewoon gevuld. */
.rooster:not(:has(.keuze.nadruk)) .keuze .knop.primair { background: var(--oranje); color: var(--inkt); border-color: var(--oranje); }
.cijfer { padding: 4px 0; }
.stap { transition: border-color .2s var(--ease-uit); }
.stap:hover { border-color: rgba(244,138,60,.5); }
.wit .stap:hover { border-color: var(--oranje); }
.review blockquote { font-size: 16.5px; }
.score { margin-top: 8px; }

/* FAQ: hover, focus, draaiend plusje */
.faq summary { transition: color .15s var(--ease-uit); border-radius: 8px; }
.faq summary:hover { color: var(--oranje-donker); }
.faq summary:hover::after { border-color: var(--oranje-donker); color: var(--oranje-donker); }
.faq summary:focus-visible { outline: none; box-shadow: var(--ring); }
.faq summary::after { transition: transform .25s var(--ease-uit), background .2s var(--ease-uit), color .2s var(--ease-uit); }
.faq details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.faq details p { animation: faq-open .3s var(--ease-uit); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } }

/* Formulier: labels, verplicht/optioneel, inline fouten, succes, bezig-staat */
.veld { gap: 6px; margin-bottom: 18px; }
.veld label { font-size: 14.5px; }
.veld input, .veld select, .veld textarea { min-height: 50px; transition: border-color .15s var(--ease-uit), box-shadow .15s var(--ease-uit), background .15s var(--ease-uit); }
.veld input::placeholder, .veld textarea::placeholder { color: #868a93; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--grijs-700); }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--inkt); box-shadow: var(--ring); }
.veld select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
.veld.ongeldig input, .veld.ongeldig select, .veld.ongeldig textarea { border-color: var(--rood); background: var(--rood-licht); }
.veld.ongeldig input:focus, .veld.ongeldig select:focus, .veld.ongeldig textarea:focus { box-shadow: 0 0 0 4px rgba(179,38,30,.2); }
.veld.geldig input:not(:focus), .veld.geldig select:not(:focus) { border-color: var(--groen); }
.veld-fout { display: none; font-size: 13.5px; color: var(--rood); font-weight: 500; line-height: 1.4; align-items: flex-start; gap: 6px; }
.veld-fout::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
.veld.ongeldig .veld-fout { display: flex; }
.formulier .fout { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-md); font-size: 15px; line-height: 1.45; }
.formulier .fout[hidden] { display: none; }
.formulier .fout::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1f11' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
.formulier .fout a { text-decoration: underline; font-weight: 600; }
.formulier .fout b { display: block; margin-bottom: 2px; }
.formulier .verplicht-noot { font-size: 13px; color: var(--grijs-500); margin: -4px 0 18px; }
/* Het adres dat wij bij postcode en huisnummer opzoeken (PDOK), als bevestiging onder de velden.
   Groen vinkje als wij het vinden, grijs als niet; het houdt het verzenden nooit tegen. */
:is(.formulier, .samensteller) .adres-gevonden { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--grijs-700); margin: -10px 0 18px; }
:is(.formulier, .samensteller) .adres-gevonden[hidden] { display: none; }
:is(.formulier, .samensteller) .adres-gevonden::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d61' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat; }
:is(.formulier, .samensteller) .adres-gevonden.niet-gevonden { color: var(--grijs-500); }
:is(.formulier, .samensteller) .adres-gevonden.niet-gevonden::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7e87' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
/* Foto van de meterkast (27 sep 2026): het blok staat verborgen tot site.js het aanzet. */
.foto-veld[hidden] { display: none; }
.foto-veld input[type="file"] { padding: 9px 10px; font-size: 15px; color: var(--grijs-700); cursor: pointer; }
.foto-veld input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--grijs-300); border-radius: var(--r-sm); background: var(--grijs-100); color: var(--inkt); font: inherit; font-weight: 600; cursor: pointer; }
.foto-veld input[type="file"]:hover::file-selector-button { border-color: var(--grijs-700); }
.foto-veld .foto-uitleg { font-size: 13.5px; line-height: 1.4; color: var(--grijs-500); margin: 0; }
.foto-veld .foto-status { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--grijs-700); }
.foto-veld .foto-status[hidden] { display: none; }
.foto-veld .foto-status img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--grijs-300); }
.foto-veld .foto-status img[hidden] { display: none; }
.foto-veld .foto-status.goed { color: var(--inkt); font-weight: 500; }
.foto-veld .foto-status.fout { color: var(--rood); font-weight: 500; }
.foto-veld .foto-wis { margin-left: auto; flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foto-veld .foto-wis[hidden] { display: none; }
.formulier .knop[type="submit"] { width: 100%; }
.form-noot { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.form-noot .slotje { flex: none; width: 15px; height: 15px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666a73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; }
.form-noot.bel { display: block; font-size: 15px; color: var(--grijs-700); margin-top: 24px; }
.form-noot.bel a { text-decoration: none; color: var(--inkt); }
.form-noot.bel a:hover { color: var(--oranje-donker); }
.aanbod .checks li { padding-left: 34px; }
.aanbod h2 { font-size: clamp(28px, 3.4vw, 42px); }
@media (max-width: 860px) { .aanbod .formulier { order: -1; } }

/* Hero: primaire actie altijd op één regel, kengetallen wat luchtiger */
.hero .acties { margin-top: 32px; }
.hero .acties .knop { min-width: 200px; }
.kengetallen li { padding: 12px 16px; }
.hero-punten { gap: 10px 24px; }
@media (max-width: 480px) { .hero .acties { flex-direction: column; } .hero .acties .knop { width: 100%; min-width: 0; } .acties .knop.groot { padding-inline: 20px; } }
.beeld-noot { bottom: -22px; }
@media (max-width: 900px) { .hero.product .product-beeld { margin-top: 12px; padding-bottom: 24px; } }
.hero.product .product-beeld img { animation: beeld-in .7s var(--ease-uit) both; }
@keyframes beeld-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Menu op mobiel: aparte knop voor het submenu, nette animatie, sluiten met Escape */
.sub-knop { display: none; }
@media (max-width: 1040px) {
  .menu { padding-top: 8px; animation: menu-open .25s var(--ease-uit); }
  .menu > ul a { padding: 14px 8px; min-height: 48px; display: flex; align-items: center; }
  .heeft-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .heeft-sub > a::after { content: none; }
  .sub-knop { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: none; border-radius: 999px; cursor: pointer; border-bottom: 1px solid var(--grijs-100); border-radius: 0; }
  .sub-knop::before { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--inkt); border-bottom: 2px solid var(--inkt); transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease-uit); }
  .heeft-sub.open .sub-knop::before { transform: translateY(3px) rotate(-135deg); }
  .sub-knop:hover { background: var(--grijs-100); }
  .sub-knop:focus-visible { outline: none; box-shadow: inset var(--ring); }
  .heeft-sub .submenu { grid-column: 1 / -1; padding: 0 0 8px 12px; }
  .menu .submenu a { padding: 12px 8px; min-height: 44px; }
  .menu .zoek { margin-top: 4px; }
  .menu .zoek input { min-height: 48px; font-size: 16px; }
  .menu .tel { display: flex; align-items: center; gap: 10px; min-height: 48px; }
}
@keyframes menu-open { from { opacity: 0; transform: translateY(-6px); } }
.menu .submenu { animation: sub-open .18s var(--ease-uit); }
@keyframes sub-open { from { opacity: 0; transform: translateY(-4px); } }
.zoek-lijst { animation: sub-open .18s var(--ease-uit); }
.zoek-lijst a { display: flex; flex-direction: column; gap: 1px; padding: 11px 14px; min-height: 44px; justify-content: center; }
.zoek-lijst a:last-child { border-bottom: 0; }
.zoek-lijst a.actief, .zoek-lijst a:focus-visible { background: var(--oranje-licht); outline: none; }
.zoek-lijst .leeg { display: block; padding: 14px; font-size: 14px; color: var(--grijs-700); line-height: 1.45; }
.zoek-lijst .leeg a { display: inline; padding: 0; min-height: 0; color: var(--inkt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.zoek input { transition: border-color .15s var(--ease-uit), box-shadow .15s var(--ease-uit), background-color .15s var(--ease-uit); }
.zoek input:hover { border-color: var(--grijs-700); }
.zoek input:focus { box-shadow: var(--ring); }

/* Verschijnen bij scrollen: kleiner, sneller, en kaarten in een rooster na elkaar */
.in { transform: translateY(14px); transition: opacity .55s var(--ease-uit), transform .55s var(--ease-uit); }
.rooster > .in:nth-child(2), .stappen > .in:nth-child(2) { transition-delay: .07s; }
.rooster > .in:nth-child(3), .stappen > .in:nth-child(3) { transition-delay: .14s; }
.rooster > .in:nth-child(4), .stappen > .in:nth-child(4) { transition-delay: .21s; }
.rooster > .in:nth-child(5), .stappen > .in:nth-child(5) { transition-delay: .28s; }
.rooster > .in:nth-child(6), .stappen > .in:nth-child(6) { transition-delay: .35s; }
.rooster > .in:nth-child(n+7) { transition-delay: .4s; }

/* Hero op donker: secundaire knop was onzichtbaar (inkt op inkt) */
.hero .knop.secundair { color: var(--wit); border-color: rgba(255,255,255,.75); }
.hero .knop.secundair:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.sub a, p > a, .lead a { display: inline-block; padding-block: 3px; margin-block: -3px; }

/* 404 */
.pagina-404 .hero.klein .wrap { min-height: 40vh; }

@media (prefers-reduced-motion: reduce) {
  .in, .rooster > .in, .stappen > .in { transition-delay: 0s; }
  .knop, .kaart, .stap, .faq summary::after, .zoek input, .veld input, .veld select, .veld textarea, .hero.product .product-beeld img, .product-kaart figure img, .sub-knop::before, .pijl::after, a.kaart::after { transition: none; animation: none; }
  .menu, .menu .submenu, .zoek-lijst, .faq details p { animation: none; }
  .knop:hover, a.kaart:hover, .kaart.werksoort:hover, .kaart.product-kaart:hover, .kaart.keuze:hover { transform: none; }
  .knop .spin { animation: draai 1.6s linear infinite; }
}

/* ---- Plaatspagina's product x plaats (11 sep 2026) ---- */
.situaties .kaart p a, .noot a, .faq p a { text-decoration: underline; text-underline-offset: 3px; }
.keuze .voor-wie { font-size: 14px; color: var(--grijs-700); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--grijs-200); }
.plaatsen.regio li { padding: 0; }
.plaatsen.regio a { display: block; padding: 8px 14px; }
.plaatsen.regio a:hover { background: var(--oranje); color: var(--inkt); border-radius: 999px; }
.regio-kop { font-size: 18px; margin-top: 24px; }
.ook-in { display: grid; gap: 12px; margin-top: 20px; }
.ook-in a { display: grid; gap: 2px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--wit); border: 1px solid var(--grijs-200); }
.ook-in a:hover { border-color: var(--oranje); }
.ook-in span { font-size: 14px; color: var(--grijs-700); }

/* ---- 16 sep 2026: kopbalk paste niet, het logo werd tot 0 px geknepen ----
   De nav is een flexrij van logo + menu. Het menu vroeg 1233 px terwijl de wrap
   1200 px breed is, dus het logo kreeg 0 px toebedeeld en de aanbodknop viel
   rechts buiten beeld. Op elke pagina, op elke desktopbreedte.
   Het logo krimpt nu nooit meer, en op desktop staat het zoekveld niet meer in
   de balk (in het uitklapmenu op mobiel blijft het gewoon staan). */
.logo { flex: none; }
.logo img { display: block; }
@media (min-width: 1041px) {
  .kop .zoek { display: none; }
  .menu { gap: 16px; }
  .menu > ul { gap: 2px; }
  .menu > ul a { padding: 10px 10px; }
}

/* ---- 17 sep 2026: productkaarten waren niet klikbaar ----
   De kaarten met een productfoto heten .kaart.keuze, niet .product-kaart. De
   eerdere fix raakte ze dus niet: gemeten met elementFromPoint op drie punten
   per beeld kwam er op geen enkel punt een link onder de muis.
   Zelfde patroon als bij .werksoort en .product-kaart: de knop krijgt een
   ::after over de hele kaart. Let op, niets binnen de kaart mag position:
   relative krijgen behalve de li's, anders hangt de ::after aan het verkeerde
   element. .keuze > div is flex, dus z-index werkt daar zonder positionering. */
/* WEG op 24 september 2026. Dit klikvlak lag wel over de hele kaart, maar een
   klik erop activeerde de link niet: de browser wees de knop aan als doel en deed
   vervolgens niets. Gemeten met een echte browser: met dit vlak erin werkt de foto
   niet, zonder dit vlak wel. De foto is nu zelf een link (.kaart-beeld). */
/* .keuze .knop::after { content: ""; position: absolute; inset: 0; z-index: 1; } */
.keuze .knop { z-index: 2; }

/* Het logo in de voet gaat ook naar de homepage. */
.voet-logo { display: inline-block; }
.voet-logo img { display: block; }

/* Het grote beeld in de hero van een productpagina is een link naar hetzelfde
   adres als de knop ernaast. Zie beeldKlikbaar() in bron/bouw.mjs. */
.beeld-link { display: block; }
.beeld-link img { display: block; width: 100%; height: auto; }

/* ---- 17 sep 2026: submenu klapte dicht zodra je er naartoe bewoog ----
   JD: "als ik hover over de thuisbatterij knop en de dropdown verschijnt, ga ik
   met mijn muis naar beneden en verdwijnt de dropdown."
   Oorzaak: de submenu staat op top: calc(100% + 6px). Die 6 px is een dood gat.
   De muis verlaat het menu-item, raakt de submenu nog niet, en :hover valt weg.
   Een onzichtbare brug over het gat houdt de hover vast. Alleen op desktop; op
   mobiel staat de submenu gewoon in de flow en is er geen gat. */
@media (min-width: 1041px) {
  .heeft-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
}

/* ---- 17 sep 2026: cookiebanner (Google Analytics pas na Akkoord) ----
   Kaart linksonder op desktop; op mobiel onderaan het scherm (de vaste actiebalk is sinds 18 oktober 2026 weg). Geen overlay: de site blijft bruikbaar.
   Tonen en verbergen gebeurt met het hidden-attribuut; omdat .cookies display: flex
   heeft, moet [hidden] hier expliciet display: none krijgen. */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; display: flex; pointer-events: none; }
.cookies[hidden] { display: none; }
.cookies-vak { pointer-events: auto; width: min(100%, 460px); background: var(--wit); color: var(--inkt); border: 1px solid var(--grijs-200); border-radius: var(--r-lg); box-shadow: var(--schaduw); padding: 22px 24px 24px; animation: cookies-in .35s var(--ease-uit); }
.cookies-vak .cookies-kop { font-family: var(--kop); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--inkt); margin: 0 0 6px; }
.cookies-vak p { font-size: 15px; line-height: 1.5; color: var(--grijs-700); margin: 0 0 16px; }
.cookies-vak p a { color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }
.cookies-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies-knoppen .knop { flex: 1 1 0; min-width: 0; background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.cookies-knoppen .knop:hover { background: var(--inkt-3); border-color: var(--inkt-3); }
.cookies-knoppen .knop:focus-visible { box-shadow: 0 0 0 3px var(--wit), 0 0 0 6px var(--inkt); }
@keyframes cookies-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 800px) {
  .cookies { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cookies-vak { width: 100%; padding: 12px 14px 14px; }
  .cookies-vak p { font-size: 14px; line-height: 1.4; margin: 0 0 10px; }
  .cookies-knoppen { flex-wrap: nowrap; gap: 8px; }
  .cookies-knoppen .knop { padding: 10px 8px; font-size: 15px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cookies-vak { animation: none; } }

/* ---- 18 sep 2026: Waarom Noviz, korte versie boven de prijs ----
   Rustig blok van drie regels dat vlak boven een rooster met keuzekaarten staat
   (partial bron/partials/waarom-kort.html). Bewust zonder kop, knop en kleurvlak,
   zodat de aandacht bij de prijs en de knop eronder blijft. De ruimte boven het blok
   houdt het los van de inleiding erboven. */
.waarom-kort { max-width: 780px; margin: clamp(8px, 2vw, 20px) auto clamp(28px, 4vw, 44px); padding: 20px 24px; background: var(--grijs-50); border: 1px solid var(--grijs-200); border-left: 3px solid var(--oranje); border-radius: var(--r-md); text-align: left; }
.waarom-kort ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.waarom-kort li { position: relative; padding-left: 22px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--grijs-700); }
.waarom-kort li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--oranje-donker); font-weight: 800; }
.donker .waarom-kort { background: var(--inkt-2); border-color: rgba(255,255,255,.1); border-left-color: var(--oranje); }
.donker .waarom-kort li { color: rgba(255,255,255,.72); }
.artikel-inhoud .waarom-kort ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.artikel-inhoud .waarom-kort li { margin-bottom: 0; line-height: 1.5; }
@media (max-width: 600px) { .waarom-kort { padding: 18px 18px; } .waarom-kort li { font-size: 14.5px; } }

/* Waarom Noviz, het volledige verhaal (partial bron/partials/waarom-vol.html):
   verhaal links, het praktijkvoorbeeld in een kaart ernaast, daaronder zes punten. */
#waarom .split { align-items: start; }
#waarom .split h3 { margin-bottom: .6em; }
.waarom-punten { margin-top: clamp(32px, 5vw, 56px); }
/* De inleiding is een alinea van zes regels: iets breder dan een gewone lead, en op een
   smal scherm links uitgelijnd, want gecentreerde lopende tekst leest daar slecht. */
#waarom .sectie-kop .lead { max-width: 720px; }
@media (max-width: 700px) { #waarom .sectie-kop .lead { text-align: left; } }
/* ---- v6 media ---- (12 sep 2026, samengevoegd 18 sep 2026: beeld bij de kennisartikelen,
   campagnebeelden uit images/media/) */
.artikel-beeld { margin: 0 0 28px; }
.artikel-beeld img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--schaduw-zacht); }
.artikel-beeld.smal { max-width: 520px; margin-inline: auto; }
.artikel-beeld figcaption { font-size: 14px; color: var(--grijs-500); line-height: 1.45; margin-top: 10px; }
/* Hero van de landingspagina's: het campagnebeeld is vierkant, de productrenders zijn 4:3. */
.landing .hero.product .product-beeld img { width: min(100%, 460px); }
/* WhatsApp was tussen 1041 en 1240 px nergens zichtbaar: de kopbalk verbergt telefoon en WhatsApp
   vanaf 1240 px naar beneden, en Contact in het menu verschijnt pas onder 1041 px. In dat gat blijft
   WhatsApp nu staan als icoon. (De regels van de tak die het zoekveld versmalden en het
   telefoonnummer verborgen zijn niet overgenomen: de kopbalkfix van 16 september haalt het
   zoekveld op desktop al uit de balk, dus die ruimte is er nu.) */
@media (min-width: 1041px) and (max-width: 1240px) {
  .kop .wa { display: inline-flex; padding: 11px; border-radius: 999px; }
  .kop .wa .wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kop .wa:hover { background: var(--grijs-100); }
  .nav { gap: 14px; }
  .menu { gap: 12px; }
  .menu > ul a { padding-inline: 9px; }
}



/* ================= Merkpagina met samensteller (24 september 2026) =================
   JD: "er moeten een groot vlak zijn met de growatt thuisbatterij aan de
   rechterkant. en aan de linkerkant een lijst met keuzes. als ze op een keuze
   klikken zien ze aan de rechterkant het product verschijnen (...) live. als ze op
   aanvragen klikken word het rechtervlak uitvergroot zodat bijna het hele scherm
   wordt gevult."

   Op een telefoon past dat niet naast elkaar; daar komt het vlak boven de keuzes
   te staan, zodat je meteen ziet waar het over gaat. */
.merk-kop { padding-top: 32px; }
.merk-kop .kruimel { color: var(--grijs-700); font-size: 14px; margin: 0 0 8px; }
.merk-kop h1 { margin: 0 0 8px; }

.samensteller-vlak { padding-top: 28px; padding-bottom: 8px; }
.samensteller { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.samensteller .honing { position: absolute; left: -9999px; width: 1px; height: 1px; }
.samensteller .links > h2 { margin: 0 0 20px; }

.optie { border: 0; padding: 0; margin: 0 0 22px; }
.optie legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.optie .hulp { color: var(--grijs-700); font-size: 14.5px; margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 9px 16px; border: 1px solid var(--grijs-200); border-radius: 999px; background: var(--wit); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.chip input:checked + span { background: var(--oranje, #E85D38); border-color: var(--oranje, #E85D38); color: var(--inkt, #1c1c1c); }
.chip input:focus-visible + span { outline: 3px solid var(--oranje, #E85D38); outline-offset: 2px; }

/* Contactvelden: dezelfde .veld-opmaak als op de andere aanvraagformulieren (27 sep 2026). */
.optie.contact legend { margin-bottom: 12px; }

.samensteller .rechts { position: sticky; top: 96px; }
.samensteller .vlak { background: var(--wit); border: 1px solid var(--grijs-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--schaduw); }
.samensteller .vlak img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.samensteller .samenvatting { padding: 22px 26px 26px; }
.samensteller .merknaam { display: block; color: var(--grijs-700); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.samensteller .regel-maat { display: block; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; margin: 4px 0 12px; }
.samensteller .regels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.samensteller .regels li { color: var(--grijs-700); font-size: 15px; }
.samensteller .regels li b { color: var(--inkt, #1C1C1C); font-weight: 600; }

/* Na het aanvragen: het vlak groeit tot bijna het hele scherm. */
.samensteller.verzonden { grid-template-columns: 1fr; }
.samensteller.verzonden .links { display: none; }
.samensteller.verzonden .rechts { position: static; }
.samensteller.verzonden .vlak { display: none; }
.samensteller.verzonden .bedankt { display: block; padding: clamp(24px, 4vw, 44px); background: var(--wit); border: 1px solid var(--grijs-200); border-radius: var(--r-lg); box-shadow: var(--schaduw); animation: vlak-groeit .45s cubic-bezier(.22,.8,.3,1) both; }
.samensteller.verzonden .bedankt[hidden] { display: none; }
.samensteller.verzonden .bedankt > h2 { margin: 0 0 8px; }
.samensteller.verzonden .bedankt > .lead { margin: 0 0 clamp(20px, 3vw, 32px); color: var(--grijs-700); }
@keyframes vlak-groeit { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .samensteller.verzonden .bedankt { animation: none; } }
/* Het bericht scrollt met de bovenkant in beeld; de vaste kop (.kop, sticky, 89px op 1440 en 77px op 400 breed) mag het niet afdekken. De ruimte is groter dan de kop omdat het bericht met een zoomanimatie verschijnt. */
.samensteller .bedankt { scroll-margin-top: 130px; }

@media (max-width: 900px) {
  .samensteller { grid-template-columns: 1fr; }
  .samensteller .rechts { position: static; order: -1; }
}
/* Meerdere modellen op één keuzekaart (6 oktober 2026): een knop per model, elk naar de eigen pagina. */
.keuze .modellen { display: flex; flex-wrap: wrap; gap: 8px; }

/* Feitenblok op modelpagina's (6 oktober 2026) */
.feiten-blok h2 { margin-bottom: 16px; }
table.feiten { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.feiten th, table.feiten td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--grijs-200); }
table.feiten th { width: 34%; font-weight: 600; color: var(--inkt); }
@media (max-width: 640px) { table.feiten th, table.feiten td { display: block; width: auto; padding: 4px 0; border: 0; } table.feiten tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--grijs-200); } }
.feiten-blok { padding-block: 28px; }

/* Navigatie onderaan modelpagina's: knoppen, ruimte boven en onder */
.modelnav-kop { margin: 8px 0 0; }
.modelnav { margin-top: 12px; margin-bottom: 20px; }
@media (max-width: 480px) { .modelnav .knop { width: 100%; white-space: normal; text-align: center; } }

/* ---- Bedankpagina (9 okt 2026): wat er na de aanvraag gebeurt ----
   Links de route (klaar, volgende, rest), rechts het blok "Hierna". Op een telefoon staat "Hierna" eerst:
   dat is wat de klant meteen wil weten. Geen pictogrammen in tegels: alleen cijfers en een vinkje in een ring. */
.vervolg[hidden] { display: none; }
.vervolg-sectie { padding-block: clamp(40px, 6vw, 80px); }
.vervolg-rooster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.vervolg-rooster .route { grid-column: 1; grid-row: 1; }
.vervolg-rooster .hierna { grid-column: 2; grid-row: 1; position: sticky; top: 112px; }
.route { list-style: none; margin: 0; padding: 0; }
.route li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; }
.route li:last-child { padding-bottom: 0; }
.route li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px; background: var(--grijs-200); }
.route li.klaar:not(:last-child)::after { background: var(--oranje); }
.route .nr { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--grijs-300); background: var(--wit); display: grid; place-items: center; font: 700 17px/1 var(--kop); color: var(--grijs-700); }
.route li.klaar .nr { border-color: var(--oranje-tekst); color: var(--oranje-tekst); }
.route li.volgende .nr { background: var(--oranje); border-color: var(--oranje); color: var(--inkt); }
.route b { font: 700 19px/1.3 var(--kop); color: var(--inkt); }
.route em { margin-left: 10px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oranje-tekst); white-space: nowrap; }
.route li.klaar em { color: var(--grijs-700); }
.route p { margin: 4px 0 0; max-width: 56ch; font-size: 16px; color: var(--grijs-700); }
.hierna { background: var(--inkt); color: var(--wit); border-radius: var(--r-lg); padding: clamp(24px, 3.5vw, 40px); }
.hierna .sub { color: var(--oranje); }
.hierna h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 32px); color: var(--wit); }
.hierna p { margin: 0 0 12px; color: rgba(255,255,255,.82); }
.hierna .let-op { padding-left: 14px; border-left: 3px solid var(--oranje); color: var(--wit); }
.hierna a { color: var(--oranje); text-decoration: underline; text-underline-offset: 3px; }
.hierna .niet-wachten { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
@media (max-width: 860px) {
  .vervolg-rooster { grid-template-columns: minmax(0, 1fr); }
  .vervolg-rooster .route, .vervolg-rooster .hierna { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 480px) {
  .route li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .route .nr { width: 36px; height: 36px; font-size: 15px; }
  .route li:not(:last-child)::after { left: 17px; top: 40px; }
  .route b { font-size: 17px; }
}

/* Keurmerken (10 okt 2026): officiële logo's van InstallQ en Techniek Nederland, ongewijzigd, op een lichte plaat zodat ze op de donkere voet leesbaar zijn. */
.erkend-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 18px 0 0; }
.erkend-logos img { display: block; height: auto; max-width: 100%; }
.voet-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.voet-keurmerken { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.voet-keurmerken img { display: block; margin: 0; height: auto; padding: 6px 10px; background: #fff; border-radius: 8px; box-sizing: content-box; max-width: 100%; }

/* ---- Smalle telefoons, 320 en 360 px (herstelronde 10 okt 2026) ----
   Een knop met lange tekst ("Vraag uw aanbod aan" in de kop van een landingspagina, "Bekijk laadpalen voor bedrijven" in een kaart,
   "Groepenkast vervangen in Doetinchem" in een blok) liep door op 320 en 360 px en rekte de hele pagina op (373, 345 en 333 px).
   Vanaf 381 px verandert er niets; daaronder mag de tekst van een knop op een tweede regel. */
@media (max-width: 380px) {
  .knop { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
  .landing .menu { min-width: 0; }
  .landing .menu .knop { padding: 10px 12px; }
  .hero .wrap > * { min-width: 0; }
}

/* Energieadvies (11 okt 2026): voetnoot onder de claim en de regel met de prijs. */
.hero .voetnoot { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.68); max-width: 62ch; margin-top: 18px; }
.hero .prijs-regel { margin-top: 22px; }
.prijs-regel b { color: var(--oranje); }

/* ---- 18 okt 2026: menupunt Contact (Bellen, WhatsApp, Vraag uw aanbod aan) in het uitklapmenu op de telefoon ----
   Vervangt de vaste balk onderaan het scherm en de losse telefoon-, WhatsApp- en aanbodknop onderaan het menu.
   De stijl is die van de menupunten en hun submenu's. Op een computer (kopbalk) blijft alles zoals het was. */
.contact-kop { display: none; }
@media (min-width: 1041px) { .menu > ul > .contact-mobiel { display: none; } }
@media (max-width: 1040px) {
  .menu > ul > .contact-mobiel { display: block; }
  .contact-kop { display: flex; align-items: center; min-height: 48px; padding: 14px 8px; font-size: 17px; font-weight: 500; color: var(--grijs-900); border-bottom: 1px solid var(--grijs-100); }
  .contact-lijst { padding: 0 0 8px 12px; }
  .menu .contact-lijst a { padding: 12px 8px; min-height: 44px; font-size: 16px; border-bottom: 0; }
  .menu > .tel, .menu > .wa, .menu > .knop { display: none; }
}