/**
 * G-Paints Schilderwerken, style.css
 * Uit prototype D (workspace/branding/richting-d.html), gekozen door Danilo op 28/10/26. Waarom alles zo is: brand.md.
 * Warm zwart met het rood van het logo, Lexend, de rode knop als strook afplaktape, het formulier als wit papier
 * met een donkere scorebalk. De realisaties hebben hun eigen stijl (E Afgeplakt) in realisaties.css.
 *
 * 1. Fonts  2. Reset  3. Tokens  4. Basis  5. Knoppen  6. Kop  7. Eerste scherm  8. Diensten
 * 9. Werkwijze  10. Realisaties op de home  11. Offerteblok en formulier  12. Subpagina's
 * 13. Offertepagina  14. Contact  15. Voet  16. Gsm  17. Reviews onder de hero  18. Reviews als tijdbalk
 */

/* 1. Fonts: Latijnse subsets, variabel, OFL (assets/fonts/LICENSE.txt) */
@font-face { font-family: 'Lexend'; src: url('/assets/fonts/lexend-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lexend Exa'; src: url('/assets/fonts/lexend-exa-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* 2. Reset (websites-stack.md §4) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }

/* 3. Tokens */
:root {
  --zwart: #1A1112;          /* warm zwart met een rode ondertoon, bewust niet het pure zwart van abaw.be */
  --zwart-diep: #140C0D;     /* voet en de onderkant van het offerteblok */
  --vlak: #251819;           /* kaarten, cellen */
  --vlak2: #2F2122;          /* knoppen in kaarten, stappenlijst */
  --lijn: #412F30;
  --stippel: #6F5B5B;
  --wit: #F6F0EC;
  --tekst: #E0D5D1;
  --grijs: #B3A5A2;
  --rood: #C71836;           /* het rood uit het logo, enkel voor acties en de tape */
  --rood-hover: #AD1430;
  --papier: #F7F2EE;         /* het formulier */
  --inkt: #1F1516;
  --papierlijn: #D9CEC8;
  --papiergrijs: #6D605E;
  --ster: #FBBC04;           /* Google-geel: valt meer op dan een huiskleur */

  --font: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'Lexend Exa', 'Lexend', system-ui, sans-serif;

  --container: 1280px;
  --gutter: 48px;
  --sectie: 7rem;
  --r-knop: 6px;
  --r-tegel: 14px;
  --schaduw-papier: 0 40px 80px -24px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
  /* De gescheurde rand van de tape: recht begin, gescheurd einde */
  --tape: polygon(0 0, calc(100% - 6px) 0, 100% 11%, calc(100% - 5px) 23%, 100% 36%, calc(100% - 7px) 50%, calc(100% - 1px) 62%, calc(100% - 6px) 75%, 100% 88%, calc(100% - 4px) 100%, 0 100%);
}

/* 4. Basis */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--zwart); color: var(--wit); font-family: var(--font); font-weight: 300; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
b, strong { font-weight: 500; }
.label { font-family: var(--font-label); font-weight: 300; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--grijs); }
.icon { width: 1em; height: 1em; flex: none; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--wit); color: var(--inkt); padding: 10px 16px; border-radius: var(--r-knop); font-weight: 500; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--wit); outline-offset: 3px; }
.sterren { display: inline-flex; gap: 2px; color: var(--ster); vertical-align: -2px; }
.sterren .icon { width: 16px; height: 16px; }

/* 5. Knoppen. De rode knop is een strook afplaktape (uit E, Danilo 28/10/26: "lijkt precies een laagje verf").
   Rechte hoeken, recht begin, gescheurd einde; bij hover komt er wat tape bij. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--rood); color: #fff; border: 0; border-radius: 0; clip-path: var(--tape); padding: 18px 36px 18px 28px; font-weight: 500; font-size: 17px; line-height: 1.2; cursor: pointer; transition: padding .25s ease, background .2s; }
.knop:hover { background: var(--rood-hover); padding-right: 48px; }
.knop .icon { width: 18px; height: 18px; transition: transform .2s; }
.knop:hover .icon { transform: translateX(4px); }
.knop:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--wit); }
.knop--licht { clip-path: none; border-radius: var(--r-knop); background: rgba(246,240,236,.08); border: 1px solid rgba(246,240,236,.28); padding-right: 28px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.knop--licht:hover { background: rgba(246,240,236,.16); padding-right: 28px; }
.knop--licht .icon { width: 20px; height: 20px; }
.knop--licht:hover .icon { transform: none; }
.knop--licht:focus-visible { outline: 2px solid var(--wit); outline-offset: 3px; box-shadow: none; }
.tekstlink { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; border-bottom: 1px solid var(--lijn); padding-bottom: 4px; white-space: nowrap; transition: border-color .2s; }
.tekstlink:hover { border-color: var(--wit); }
.tekstlink .icon { width: 16px; height: 16px; }

/* 6. Kop. Vast bovenaan sinds 3/11/26, ook op gsm (Pascal: de navigatie moet meescrollen; tot dan scrolde hij mee weg).
   Op de startpagina ligt hij eerst doorzichtig over de foto; zodra je scrolt zet nav.js .kop--vlak: het zwart erachter,
   elders een haarlijn eronder. De scroll-margin houdt ankers, de skip-link en de toetsenbordfocus in de inhoud en de voet
   onder de kop uit. Niet met scroll-padding-top op html: dan scrolde de pagina 400 px op zodra een knop in de kop zelf
   focus kreeg (Tab, Shift+Tab), omdat die in de opgevulde strook ligt (gemeten in Chromium, 3/11/26). */
:root { --kop-h: 96px; }
:where(#inhoud, #inhoud *, .voet *) { scroll-margin-top: calc(var(--kop-h) + 12px); }
.kop { position: sticky; top: 0; z-index: 20; background: var(--zwart); transition: background-color .25s, box-shadow .25s; }
.kop--vlak { box-shadow: 0 1px 0 var(--lijn); }
.thuis .kop { position: fixed; top: 0; left: 0; right: 0; background: transparent; }
.thuis .kop.kop--vlak { background: var(--zwart); }
.kop__binnen { display: flex; align-items: center; height: 96px; gap: 40px; }
.kop__logo { flex-shrink: 0; }
.kop__logo img { width: 190px; height: auto; }
.kop__nav { display: flex; gap: 34px; margin-left: auto; font-size: 16px; font-weight: 400; }
.kop__nav a { padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s; white-space: nowrap; }
/* Hover in de navigatie: een witte lijn van 2 px, zoals in de mockup (Danilo, 29/10/26). In het uitklapmenu blijft het rood. */
.kop__nav > a { border-bottom-width: 2px; }
.kop__nav > a:hover { border-color: var(--wit); }
.kop__sub a:hover, .kop__sub a[aria-current] { border-color: var(--rood); }
/* De pagina waar je bent: een strook tape onder het woord, zoals in de mockup van de realisaties (Danilo, 29/10/26). Diensten: zie .kop__navknop.is-huidig */
.kop__nav > a[aria-current] { position: relative; border-color: transparent; }
.kop__nav > a[aria-current]::after, .kop__navknop.is-huidig::after { content: ""; position: absolute; left: -8px; right: -12px; bottom: -6px; height: 9px; background: var(--rood); clip-path: var(--tape); pointer-events: none; }
.kop__tel { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; white-space: nowrap; }
.kop__tel .icon { width: 17px; height: 17px; }
.kop__knop { padding: 14px 34px 14px 22px; font-size: 16px; white-space: nowrap; }
.kop__knop:hover { padding-right: 44px; }
.kop__knop .kort { display: none; }
/* Van 901 tot 1240 px past de kop met vier menu-items anders niet op één regel (Over ons erbij, 29/10/26; sinds 2/11/26 vijf, met Bedrijven):
   kortere knop en kleinere tussenruimtes, tot 1100 px (tot 2/11/26: 1040) enkel het icoon van de telefoon (het nummer blijft voorleesbaar)
   en nog kleinere tussenruimtes: met vijf items stak de knop op 901 px 16 px uit en van 1041 tot 1085 px tot 44 px over de rand
   (.kop erbij, anders wint de regel van 1100 px). */
@media (min-width: 901px) and (max-width: 1240px) {
  .kop__binnen { gap: 28px; }
  .kop__nav { gap: 22px; }
  .kop__logo img { width: 160px; }
  .kop__knop .lang { display: none; }
  .kop__knop .kort { display: inline; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .kop__logo img { width: 150px; }
  .kop:not(.kop--minimaal) .kop__tel-nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .kop__tel .icon { width: 20px; height: 20px; }
  .kop .kop__binnen { gap: 22px; }
  .kop .kop__nav { gap: 18px; }
}
.kop__menu { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; color: var(--wit); place-content: center; }
.kop__menu .icon { width: 26px; height: 26px; }
.kop__menu .icon--sluit, .kop__menu[aria-expanded="true"] .icon--menu { display: none; }
.kop__menu[aria-expanded="true"] .icon--sluit { display: block; }
.kop--minimaal .kop__tel { margin-left: auto; }
/* Gsm-menu: vast van onder de kop tot onderaan het scherm, met een eigen scroll. nav.js zet top op de onderkant van de kop
   en zet de pagina erachter vast (body.menu-open), anders scrolde de pagina door en schoof het menu mee weg (29/10/26). */
.gsm-menu { position: fixed; left: 0; right: 0; top: 66px; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--zwart); border-top: 1px solid var(--lijn); padding: 24px 0; }
/* Inhoud verticaal in het midden van het paneel. Met min-height in plaats van centreren op .gsm-menu zelf blijft
   de bovenkant bereikbaar als het menu op een kleine gsm moet scrollen (Danilo, 29/10/26: te veel leegte onderaan). */
.gsm-menu > nav { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
body.menu-open { overflow: hidden; position: fixed; width: 100%; }
.gsm-menu ul a { display: block; padding: 12px 0; font-size: 20px; font-weight: 400; text-align: center; }
.gsm-menu__acties { display: grid; gap: 14px; margin-top: 26px; }
.gsm-menu__acties .knop { width: 100%; }
.gsm-menu__tel { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 400; }
.gsm-menu__tel .icon { width: 20px; height: 20px; color: var(--grijs); }

/* 7. Eerste scherm: foto van rand tot rand, verloop naar warm zwart aan de tekstkant */
.held { position: relative; min-height: 800px; display: flex; align-items: center; overflow: hidden; background: var(--zwart); }
.held__foto { position: absolute; inset: 0 0 0 24%; }
.held__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.held::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(90deg, rgba(26,17,18,1) 0%, rgba(26,17,18,1) 24%, rgba(26,17,18,.78) 34%, rgba(26,17,18,.25) 46%, rgba(26,17,18,0) 56%),
  linear-gradient(180deg, rgba(26,17,18,.6) 0%, rgba(26,17,18,0) 14%, rgba(26,17,18,0) 74%, rgba(26,17,18,.92) 100%); }
.held .wrap { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 150px; }
.held__tekst { max-width: 600px; }
.held .label { margin-bottom: 24px; }
.held h1 { font-size: 72px; margin-bottom: 26px; }
/* Subtitel onder de H1: de zin van Pascal (30/10/26). De H1 zelf draagt het zoekwoord. */
.held__sub { font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--wit); max-width: 560px; margin: -8px 0 22px; }
.held__lead { font-size: 20px; color: var(--tekst); max-width: 520px; margin-bottom: 38px; }
.acties { display: flex; gap: 14px; flex-wrap: wrap; }
.held__bewijs { display: flex; gap: 28px; margin-top: 34px; font-size: 16px; color: var(--tekst); }
.held__bewijs b { color: var(--wit); }
/* De Google-score boven de titel (sinds 3/11/26, Danilo): op gsm meteen in beeld onder de foto, en niet meer vlak boven
   de score van het reviewblok. "Meer dan 15 jaar ervaring" bleef bij de knoppen (.held__bewijs). */
.held__score { font-size: 16px; color: var(--tekst); margin-bottom: 20px; }
.held__score .sterren { gap: 3px; vertical-align: -4px; }
.held__score .sterren .icon { width: 20px; height: 20px; }
.held__score b { color: var(--wit); }
.dienstkop .held__score { margin: 22px 0 0; }
/* De score als link naar de Google-reviews (Pascal 30/10/26), ook in het blok "Ook zo'n werk?" op de realisaties. */
.bewijs-link { transition: color .2s; }
.bewijs-link:hover { color: var(--wit); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* 8. "Wat moet er gebeuren?" (uit C, in de kleuren van D): foto boven, tekst op een effen vlak.
   Subgrid houdt titels, teksten en knoppen van de vier kaarten op dezelfde hoogte. */
.diensten-sectie { padding: var(--sectie) 0 0; scroll-margin-top: calc(var(--kop-h) + 20px); }
.sectiekop { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 28px; }
.sectiekop h2 { font-size: 50px; }
.sectiekop p { color: var(--tekst); max-width: 440px; }
.diensten { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 16px; }
.dienst { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; background: var(--vlak); border-radius: var(--r-tegel); overflow: hidden; transition: transform .25s; }
.dienst:hover { transform: translateY(-3px); }
.dienst__foto { width: 100%; height: 280px; object-fit: cover; }
.dienst h3 { font-size: 26px; letter-spacing: -.02em; padding: 26px 26px 10px; }
.dienst p { color: var(--tekst); font-size: 16px; line-height: 1.6; padding: 0 26px 22px; }
.dienst__link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15.5px; background: var(--rood); color: #fff; border-radius: var(--r-knop); padding: 11px 16px; margin: 0 26px 26px; justify-self: start; align-self: end; }
.dienst__link .icon { width: 17px; height: 17px; transition: transform .2s; }
.dienst:hover .dienst__link .icon { transform: translateX(4px); }
.cellen { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; margin-top: 16px; }
.cellen--zonder-score { grid-template-columns: 1fr 2fr; }
.cel { background: var(--vlak); border-radius: var(--r-tegel); padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; min-height: 170px; }
.cel__groot { font-size: 58px; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }
.cel__klein { font-size: 15px; color: var(--grijs); }
.cel--link { transition: background-color .2s; }
.cel--link:hover { background: var(--vlak2); }
.cel--link:hover .cel__klein { color: var(--tekst); }
/* Merklogo's: --h is de hoogte op volle breedte. Samen zijn ze 387 px breed plus vier tussenruimtes van 12 px;
   is de tegel smaller, dan krimpen ze mee (container query), zodat ze op één rij blijven. */
.cel__merken { container-type: inline-size; display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cel__merken img { width: auto; height: calc(var(--h) * 1px); height: min(calc(var(--h) * 1px), calc(var(--h) * (100cqw - 48px) / 387)); }

/* 9. Werkwijze: drie stappen. In D is een rood vlak altijd een actie: het plaatsbezoek krijgt enkel een rode rand. */
.werkwijze { padding: var(--sectie) 0; }
.kopje { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.kopje h2 { font-size: 50px; }
.kopje p { color: var(--tekst); max-width: 420px; }
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stap { background: var(--vlak); border-radius: var(--r-tegel); padding: 32px 30px 34px; }
.stap__nr { font-family: var(--font-label); font-weight: 300; font-size: 15px; letter-spacing: .2em; color: var(--grijs); margin-bottom: 46px; display: block; }
.stap h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 10px; }
.stap p { font-size: 16px; color: var(--tekst); line-height: 1.6; }
.stap--uit { background: var(--vlak2); box-shadow: inset 0 0 0 1.5px var(--rood); }
/* Stapnummer 02 grijs zoals 01 en 03: rood op het donkere vlak haalde 2,65:1 (audit 30/10/26, a11y-1). De rode rand duidt de stap aan. */
.stap--uit .stap__nr { color: var(--grijs); }

/* 10. Realisaties op de home: het fotoraster uit C */
.realisaties-kort { padding: 0 0 var(--sectie); }
.galerij { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 16px; }
.galerij a { position: relative; display: block; border-radius: var(--r-tegel); overflow: hidden; }
.galerij a:first-child { grid-row: 1 / 3; }
.galerij img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galerij a:hover img { transform: scale(1.03); }
.bijschrift { position: absolute; left: 14px; bottom: 14px; background: rgba(26,17,18,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--r-knop); padding: 7px 12px; font-size: 13.5px; font-weight: 400; color: var(--wit); }

/* 11. Offerteblok (home) en het formulier. Het formulier heeft de opbouw van E en de kleuren van D:
   wit papier, geen logo, een donkere scorebalk bovenaan (Danilo 28/10/26). */
.offerte { padding: var(--sectie) 0; background: linear-gradient(180deg, var(--zwart), var(--zwart-diep)); scroll-margin-top: calc(var(--kop-h) + 20px); }
.offerte .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.offerte__links { padding-top: 24px; }
.offerte__links h2 { font-size: 50px; margin-top: 16px; }
.offerte__links > p { color: var(--tekst); font-size: 19px; margin: 22px 0 32px; max-width: 440px; }
.stappenlijst { display: grid; gap: 8px; margin: 0 0 30px; max-width: 440px; }
.stappenlijst li { display: flex; gap: 16px; align-items: center; background: var(--vlak); border-radius: var(--r-tegel); padding: 14px 18px; font-size: 16.5px; font-weight: 400; }
.stappenlijst li span { width: 30px; height: 30px; border-radius: 50%; background: var(--zwart); display: grid; place-content: center; font-size: 15px; font-weight: 500; flex: none; }
.stappenlijst li.uit span { background: var(--rood); }
.contactrij { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 34px; }
.contactrij a { display: inline-flex; align-items: center; gap: 12px; font-weight: 400; font-size: 17px; }
.contactrij .icon { width: 20px; height: 20px; color: var(--grijs); }
.contactrij a:hover { color: #fff; }
.pascal { display: flex; align-items: center; gap: 18px; padding-top: 28px; border-top: 1px solid var(--lijn); }
.pascal__portret { width: 76px; height: 76px; border-radius: 50%; flex: none; object-fit: cover; background: var(--vlak2); }
.pascal b { display: block; font-size: 17px; }
.pascal span span { font-size: 15px; color: var(--grijs); }

.formulier { --balk: 68px; background: linear-gradient(var(--zwart), var(--zwart)) 0 0 / 100% var(--balk) no-repeat, var(--papier); color: var(--inkt); border-radius: 6px; overflow: hidden; padding: 0 0 34px; box-shadow: var(--schaduw-papier); }
/* Het paneel heeft zelf bovenaan een donkere strook even hoog als de balk: anders schemert het witte papier
   door in de afgeronde hoeken als je inzoomt of op 125 en 150 procent schaal (Danilo 28/10/26). */
.formulier__score { display: flex; align-items: center; gap: 14px; height: var(--balk); padding: 0 40px; background: var(--zwart); font-size: 16px; color: var(--tekst); }
.formulier__score b { font-size: 28px; color: var(--wit); letter-spacing: -.03em; font-weight: 600; line-height: 1; }
.formulier__score .sterren .icon { width: 18px; height: 18px; }
.formulier__score .rechts { margin-left: auto; color: var(--grijs); font-size: 15px; }
.formulier__score .rechts:only-child { margin-left: 0; color: var(--tekst); }
.formulier form { padding: 30px 40px 0; }
.stapteller { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; font-family: var(--font-label); font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--papiergrijs); white-space: nowrap; }
.stapteller__balk { flex: 1; height: 12px; position: relative; background: var(--papierlijn); }
.stapteller__balk i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--rood); clip-path: var(--tape); transition: width .35s; }
.formulier legend, .formulier .staplabel { display: block; width: 100%; font-family: var(--font); font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 20px; color: var(--inkt); }
.formulier legend { float: left; }
.formulier legend + * { clear: both; }
.keuzes { display: grid; gap: 8px; clear: both; }
.keuzes label { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: var(--r-knop); box-shadow: inset 0 0 0 1px var(--papierlijn); padding: 18px 20px; font-size: 17px; font-weight: 500; color: var(--inkt); cursor: pointer; transition: box-shadow .15s; }
.keuzes label:hover { box-shadow: inset 0 0 0 1px #B9ACA6; }
.keuzes input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #9A8D8A; display: grid; place-content: center; flex: none; cursor: pointer; }
.keuzes input:checked { background: var(--rood); box-shadow: none; }
.keuzes input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.keuzes input:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.keuzes label:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--inkt), inset 7px 0 0 var(--rood); }
.formulier .hint { font-size: 14px; color: var(--papiergrijs); margin-top: 10px; }
.formulier .knop { width: 100%; margin-top: 22px; min-height: 60px; }
.veld { margin-bottom: 22px; }
.veld label, .veld .veldlabel { display: block; font-family: var(--font-label); font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--papiergrijs); margin-bottom: 8px; }
.veld label .optioneel { font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: 13px; }
/* Verplichte velden (includes/verplicht.php): het sterretje achter het label in het rood van het logo (5,2:1 op het papier), de uitlegregel bovenaan het formulier */
.verplicht { color: var(--rood); font-family: var(--font); font-weight: 600; letter-spacing: 0; margin-left: .2em; }
.veld label .verplicht { font-size: 15px; line-height: 0; }
.verplicht-uitleg { font-size: 14px; color: var(--papiergrijs); margin-bottom: 20px; }
.verplicht-uitleg .verplicht { margin: 0 .1em; }
/* Invulvelden als wit vak, zoals de keuzetegels: zichtbaar dat je erin typt (Danilo, 29/10/26). De rand haalt 3,1:1 tegen het papier.
   Bij focus een inktrand met de rode streep links, zoals een aangevinkte keuze. Geen :user-invalid: "Volgende" in het korte
   formulier is een verzendknop, en dan kleurt de browser alle lege velden van stap 2 meteen rood. */
.veld input, .veld textarea { width: 100%; background: #fff; border: 1.5px solid #958884; border-radius: var(--r-knop); box-shadow: inset 0 1px 3px rgba(31,21,22,.07); padding: 14px 16px; font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--inkt); outline: 2px solid transparent; transition: border-color .15s, box-shadow .15s; }
.veld textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.veld input::placeholder, .veld textarea::placeholder { color: #9A8D8A; font-weight: 300; }
.veld input:hover, .veld textarea:hover { border-color: var(--papiergrijs); }
.veld input:focus, .veld textarea:focus { border-color: var(--inkt); box-shadow: inset 5px 0 0 var(--rood), 0 0 0 3px rgba(31,21,22,.08); }.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gekozen { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border-radius: var(--r-knop); box-shadow: inset 0 0 0 1px var(--papierlijn), inset 7px 0 0 var(--rood); padding: 15px 18px 15px 24px; margin-bottom: 28px; font-size: 16px; font-weight: 500; color: var(--inkt); }
.gekozen button { background: none; border: 0; color: var(--papiergrijs); text-decoration: underline; cursor: pointer; font-size: 14px; white-space: nowrap; }
/* De oppervlakte in vakjes, met "Weet ik niet" (offertepagina) */
.vakjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; clear: both; }
.vakjes label { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; background: #fff; border-radius: var(--r-knop); box-shadow: inset 0 0 0 1px var(--papierlijn); padding: 10px 8px; font-size: 15.5px; font-weight: 400; color: var(--inkt); cursor: pointer; transition: box-shadow .15s; }
.vakjes label:hover { box-shadow: inset 0 0 0 1px #B9ACA6; }
.vakjes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vakjes label:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--inkt), inset 0 -4px 0 var(--rood); font-weight: 500; }
.vakjes label:has(input:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 2px; }
.vakjes__breed { grid-column: span 2; }
/* Het volledige formulier (offerte, contact): drie kleinere tussenkoppen in plaats van één grote per stap */
.formulier fieldset.groep { margin-bottom: 26px; }
.formulier fieldset.groep legend, .wizard:not([data-stap]) .staplabel { font-size: 21px; letter-spacing: -.02em; margin-bottom: 12px; }
.wizard:not([data-stap]) .staplabel { margin-top: 6px; }
.wizard:not([data-stap]) > .veld:first-of-type { margin-bottom: 26px; }
.melding { font-size: 15px; margin-top: 12px; }
.melding:empty { display: none; }
.melding.is-fout { color: var(--rood); font-weight: 400; }
.formulier__onder { font-size: 14px; color: var(--papiergrijs); text-align: center; margin-top: 14px; padding: 0 40px; }
.formulier__onder a { text-decoration: underline; text-underline-offset: 2px; }
.formulier.is-aangewezen { animation: aanwijzen 1.2s ease; }
@keyframes aanwijzen { 0%, 100% { box-shadow: var(--schaduw-papier); } 30% { box-shadow: var(--schaduw-papier), 0 0 0 4px var(--rood); } }
.js-turnstile-target:empty, .js-turnstile-uitgesteld:empty { display: none; }
.js-turnstile-target, .js-turnstile-uitgesteld { margin-top: 18px; }

/* 12. Subpagina's: paginakop en tekst */
.paginakop { padding: 72px 0 56px; border-bottom: 1px solid var(--lijn); }
.paginakop .label { margin-bottom: 18px; }
.paginakop h1 { font-size: 60px; max-width: 900px; }
.paginakop__lead { font-size: 20px; color: var(--tekst); max-width: 640px; margin-top: 22px; }
.tekstpagina { padding: 64px 0 var(--sectie); }
.tekst { max-width: 760px; color: var(--tekst); }
.tekst h2 { font-size: 30px; color: var(--wit); letter-spacing: -.025em; margin: 48px 0 14px; }
.tekst h3 { font-size: 21px; color: var(--wit); letter-spacing: -.015em; margin: 30px 0 10px; }
.tekst p, .tekst ul, .tekst ol { margin-bottom: 16px; }
.tekst ul { list-style: disc; padding-left: 22px; }
.tekst ol { list-style: decimal; padding-left: 22px; }
.tekst li { margin-bottom: 6px; }
.tekst a { color: var(--wit); text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 3px; }
.tekst strong { color: var(--wit); }
.tekst .bijgewerkt { font-size: 15px; color: var(--grijs); }
.linkkaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; margin-top: 32px; }
.linkkaart { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--vlak); border-radius: var(--r-tegel); padding: 22px 24px; transition: background .2s; }
.linkkaart:hover { background: var(--vlak2); }
.linkkaart b { display: block; font-size: 19px; }
.linkkaart span span { font-size: 15px; color: var(--grijs); }
.linkkaart .icon { width: 20px; height: 20px; }
.bedankt-stappen { margin-top: 36px; max-width: 520px; }
.privacy { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--kop-h) + 24px); }
.legal-toc .label { margin-bottom: 12px; }
.legal-toc ol { display: grid; gap: 6px; font-size: 15px; color: var(--grijs); }
.legal-toc a:hover { color: var(--wit); }
.legal-info { background: var(--vlak); border-radius: var(--r-tegel); padding: 20px 24px; margin: 18px 0 8px; }
.tekst > h2:first-of-type { margin-top: 32px; }

/* 13. Offertepagina, zoals isomosi.be/offerte/: weinig ruis, het formulier centraal in één kolom */
.aanvraag { padding: 56px 0 88px; background: linear-gradient(180deg, var(--zwart), var(--zwart-diep)); }
.aanvraag__kolom { max-width: 640px; margin: 0 auto; }
.aanvraag__kop { margin-bottom: 30px; }
.aanvraag__kop h1 { font-size: 52px; margin-top: 14px; }
.aanvraag__kop p { color: var(--tekst); font-size: 18px; margin-top: 16px; max-width: 560px; }
.voet--minimaal { border-top: 1px solid var(--lijn); background: var(--zwart-diep); padding: 18px 0; font-size: 14px; color: var(--grijs); }
.voet--minimaal a { text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; }

/* 14. Contact */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; padding-top: 64px; padding-bottom: var(--sectie); }
.gegevens { display: grid; gap: 28px; }
.gegeven h2 { font-family: var(--font-label); font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--grijs); margin-bottom: 8px; }
.gegeven p, .gegeven a { font-size: 19px; font-weight: 400; color: var(--wit); }
.gegeven a { display: inline-flex; align-items: center; gap: 10px; }
.gegeven a .icon { width: 20px; height: 20px; color: var(--grijs); }
.gegeven a:hover { text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 4px; }
.gegeven .klein { font-size: 15px; color: var(--grijs); font-weight: 300; }

/* 15. Voet */
.voet { border-top: 1px solid var(--lijn); padding: 56px 0 34px; font-size: 16px; color: var(--tekst); background: var(--zwart-diep); }
.voet__kolommen { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.voet__merk img { width: 170px; height: auto; margin-bottom: 18px; }
.voet__kop { font-family: var(--font-label); font-weight: 300; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--grijs); margin-bottom: 14px; }
.voet p, .voet__lijst li { line-height: 1.9; }
.voet__lijst a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 3px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 44px; height: 44px; border-radius: var(--r-knop); background: var(--rood); display: grid; place-content: center; color: #fff; transition: background .2s; }
.socials a:hover { background: var(--rood-hover); }
.socials a .icon { width: 20px; height: 20px; color: #fff; } /* wit, ook op /contact/ waar .gegeven a .icon de iconen grijs maakt */
.voet__onder { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--grijs); }
.voet__onder a:hover { color: var(--wit); }

/* 16b. Dienstpagina's (en Hasselt): kop met foto, rijen tekst en foto, realisaties, FAQ */
.dienstkop { padding: 56px 0 var(--sectie); }
.dienstkop__grid { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: center; }
.dienstkop h1 { font-size: 58px; margin: 18px 0 24px; }
.dienstkop__intro { font-size: 19px; color: var(--tekst); max-width: 560px; margin-bottom: 34px; }
.dienstkop .held__bewijs { margin-top: 30px; }
.dienstkop__foto { border-radius: var(--r-tegel); overflow: hidden; aspect-ratio: 4 / 3; background: var(--vlak); }
.dienstkop__foto img { width: 100%; height: 100%; object-fit: cover; }
.dienstkop__foto--staand { aspect-ratio: 3 / 4; width: 100%; max-width: 440px; justify-self: end; } /* Over ons: Pascal op de ladder */
.dienstkop--zonder-foto .dienstkop__grid { grid-template-columns: 8fr 4fr; }
.dienstkop__tape { display: grid; gap: 18px; justify-items: end; }
.dienstkop__tape span { display: block; height: 22px; background: var(--rood); clip-path: var(--tape); }
.dienstkop__tape span:nth-child(1) { width: 78%; }
.dienstkop__tape span:nth-child(2) { width: 54%; opacity: .7; }
.dienstkop__tape span:nth-child(3) { width: 66%; opacity: .45; }
.kruimel { display: flex; gap: 10px; font-family: var(--font-label); font-weight: 300; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--grijs); }
.kruimel a:hover { color: var(--wit); }
.dienstbody { display: grid; gap: var(--sectie); padding-bottom: var(--sectie); }
.dienstbody > .wrap { width: 100%; }
.rij { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.rij--omgekeerd .rij__tekst { order: 2; }
.rij--tekst { grid-template-columns: minmax(0, 760px); }
.rij__tekst h2 { font-size: 40px; margin-bottom: 18px; }
.rij__tekst p, .rij__tekst ul { color: var(--tekst); margin-bottom: 14px; max-width: 620px; }
.rij__tekst a { color: var(--wit); text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 3px; }
.rij__tekst .lijst { display: grid; gap: 10px; }
.rij__tekst .lijst li { padding-left: 22px; position: relative; }
.rij__tekst .lijst li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 5px; background: var(--rood); clip-path: var(--tape); }
.rij__fotos { display: grid; gap: 16px; }
.rij--paar .rij__fotos { grid-template-columns: 1fr 1fr; }
.rij__foto { position: relative; border-radius: var(--r-tegel); overflow: hidden; background: var(--vlak); }
.rij__foto img { width: 100%; height: auto; display: block; }
.rij:not(.rij--paar) .rij__foto { aspect-ratio: 4 / 3; }
.rij:not(.rij--paar) .rij__foto img { height: 100%; object-fit: cover; }
/* Video in een rij: vult het kader zoals een foto. Naast een foto van 3 op 4 krijgt hij hetzelfde kader. */
.rij__foto video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rij--paar .rij__foto--video { aspect-ratio: 3 / 4; }
/* Een staande foto alleen in een rij houdt zijn staande kader, anders snijdt 4:3 de stelling of de trap af */
.rij:not(.rij--paar) .rij__foto--staand { aspect-ratio: 3 / 4; width: 100%; max-width: 440px; justify-self: center; }
.dienst-realisaties { padding: 0 0 var(--sectie); }
/* Het blok voor bedrijven op de home (2/11/26) staat onder de cellen van de diensten: ruimte boven, en onder geen, want daar begint de werkwijze met zijn eigen ruimte */
.dienst-realisaties.bedrijven-kort { padding: var(--sectie) 0 0; }
.tegelrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tegelrij--4 { grid-template-columns: repeat(4, 1fr); }
.tegel { position: relative; display: block; border-radius: var(--r-tegel); overflow: hidden; aspect-ratio: 4 / 3; background: var(--vlak); }
.tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tegel:hover img { transform: scale(1.03); }
.faq { padding: 0 0 var(--sectie); }
.faq__grid { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq__grid h2 { font-size: 40px; }
.faq__lijst { border-top: 1px solid var(--lijn); }
.faq__item { border-bottom: 1px solid var(--lijn); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 400; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 20px; height: 20px; color: var(--rood); transition: transform .2s; }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__antwoord { padding: 0 40px 22px 0; color: var(--tekst); }
.faq__antwoord a { color: var(--wit); text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 3px; }
/* Uitklapmenu Diensten in de kop: hover via CSS, klik en toetsenbord (Enter) via nav.js (aria-expanded) */
.kop__groep { position: relative; }
.kop__navknop { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: inherit; font-size: 16px; font-weight: 400; padding: 6px 0; cursor: pointer; border-bottom: 2px solid transparent; transition: border-color .2s; }
.kop__navknop:hover { border-color: var(--wit); }
.kop__navknop .icon { width: 16px; height: 16px; transition: transform .2s; }
.kop__navknop.is-huidig { position: relative; border-color: transparent; }
.kop__sub { display: none; position: absolute; top: 100%; left: -18px; z-index: 30; min-width: 250px; padding: 14px 0 0; }
.kop__sub::before { content: ""; position: absolute; inset: 14px 0 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: 0 24px 40px -12px rgba(0,0,0,.7); }
.kop__sub a { position: relative; display: block; padding: 11px 18px; font-size: 16px; }
.kop__sub a:first-child { margin-top: 8px; }
.kop__sub a:last-child { margin-bottom: 8px; }
.kop__sub a:hover, .kop__sub a[aria-current] { color: #fff; background: var(--vlak2); }
.kop__groep:hover .kop__sub, .kop__navknop[aria-expanded="true"] + .kop__sub { display: block; }
.kop__groep:hover .kop__navknop .icon, .kop__navknop[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Dienstkaarten op de home: de titel en de foto gaan naar de dienstpagina, de knop onderaan naar /offerte/ */
.dienst__fotolink { display: block; overflow: hidden; }
.dienst h3 a:hover { text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 4px; }
.dienst__link:hover { background: var(--rood-hover); }
/* De hele dienstkaart gaat naar de dienstpagina (Danilo 3/11/26): de titellink spant met een laag over de kaart, enkel de
   knop Offerte ligt erboven en gaat naar /offerte/?dienst=. Met de muis ergens op de kaart onderlijnt de titel. */
.dienst { position: relative; }
.dienst h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dienst__link { position: relative; z-index: 2; }
/* Koppen breken nooit een woord af (Danilo 2/11/26). Tot dan stond er een ­ in Binnenschilderwerken en
   Buitenschilderwerken, dat in vier kolommen en op 320 px afbrak. In vier kolommen krimpt de letter
   mee met de kaart, met 5% ruimte rond het woord (gemeten 10,45 em): 21 px op 1280 px, 23 px vanaf 1366 px.
   Vier kolommen pas vanaf 1280 px, daaronder twee (Danilo 2/11/26): tot dan vier vanaf 1101 px, met de titel op 17 px. */
@media (max-width: 1279.98px) {
  /* Twee kolommen: geen subgrid meer, de tekst rekt zodat de knoppen per rij gelijk staan */
  .diensten { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; row-gap: 16px; }
  .dienst { grid-row: auto; display: flex; flex-direction: column; }
  .dienst p { flex: 1; }
  .dienst__link { align-self: flex-start; }
}
@media (min-width: 1280px) {
  .dienst h3 { font-size: min(23px, calc(2.25vw - 8px)); }
}
/* G-Paints, Wit-Gele Kruis: koppen_heel() in includes/koppen-heel.php */
.heel { white-space: nowrap; }

/* 16. Gsm en tablet */
@media (max-width: 1100px) {
  .kop__nav { gap: 24px; }
  .held h1 { font-size: 60px; }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; --sectie: 4.5rem; --kop-h: 67px; }
  .thuis .kop, .kop { position: sticky; top: 0; background: var(--zwart); border-bottom: 1px solid var(--lijn); box-shadow: none; }
  .kop__binnen { height: 66px; gap: 10px; }
  .kop__logo img { width: 132px; }
  .kop__nav, .kop__tel { display: none; }
  .kop--minimaal .kop__tel { display: flex; font-size: 15px; }
  .kop__knop { margin-left: auto; padding: 11px 26px 11px 16px; font-size: 15px; }
  .kop__knop:hover { padding-right: 32px; }
  .kop__knop .lang { display: none; }
  .kop__knop .kort { display: inline; }
  .kop__menu { display: grid; }
  .held { min-height: 0; display: block; }
  .held__foto { position: relative; inset: auto; height: 300px; }
  .held__foto img { object-position: 58% 50%; }
  .held::after { display: none; }
  .held .wrap { padding-top: 28px; padding-bottom: 56px; }
  .held h1 { font-size: 44px; margin-bottom: 18px; }
  .held__sub { font-size: 23px; margin: -6px 0 16px; }
  .held .label { margin-bottom: 14px; font-size: 11px; }
  .held__lead { font-size: 18px; margin-bottom: 28px; }
  .acties .knop { flex: 1 1 100%; }
  .held__bewijs { flex-direction: column; gap: 4px; margin-top: 24px; }
  .held__score { font-size: 15px; margin-bottom: 14px; }
  .held__score .sterren .icon { width: 18px; height: 18px; }
  .dienstkop .held__score { margin-top: 16px; }
  .sectiekop, .kopje { flex-direction: column; align-items: start; gap: 12px; margin-bottom: 26px; }
  .sectiekop h2, .kopje h2, .offerte__links h2 { font-size: 36px; }
  .diensten { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 10px; }
  .dienst { grid-row: auto; display: flex; flex-direction: column; }
  .dienst__foto { height: 230px; }
  .dienst h3 { font-size: min(24px, 6.6vw); padding: 22px 22px 8px; } /* Binnenschilderwerken past op 320 px (2/11/26) */
  .dienst p { padding: 0 22px 18px; }
  .dienst__link { margin: 0 22px 22px; align-self: flex-start; }
  .cellen { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .cel--breed, .cellen--zonder-score .cel { grid-column: 1 / -1; }
  .cel { padding: 22px; min-height: 0; }
  .cel__groot { font-size: 44px; }
  .cel__klein .sterren { display: flex; width: max-content; margin-bottom: 6px; }
  .stappen { grid-template-columns: 1fr; gap: 10px; }
  .stap { padding: 24px; }
  .stap__nr { margin-bottom: 18px; }
  .galerij { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 170px 170px; gap: 10px; }
  .galerij a:first-child { grid-row: auto; grid-column: 1 / 3; }
  .bijschrift { font-size: 12px; left: 10px; bottom: 10px; padding: 6px 10px; }
  .offerte .wrap, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .offerte__links { padding-top: 0; }
  .formulier { --balk: 60px; margin: 0 -8px; }
  .formulier__score { padding: 0 20px; gap: 10px; }
  .formulier__score b { font-size: 24px; }
  .formulier__score .rechts { display: none; }
  .formulier__score .rechts:only-child { display: block; }
  .formulier form { padding: 24px 20px 0; }
  .formulier__onder { padding: 0 20px; }
  .formulier legend, .formulier .staplabel { font-size: 24px; }
  .twee { grid-template-columns: 1fr; gap: 0; }
  .vakjes { grid-template-columns: 1fr 1fr; }
  .paginakop { padding: 44px 0 36px; }
  .paginakop h1 { font-size: 40px; }
  .paginakop__lead { font-size: 18px; }
  .tekstpagina { padding-top: 40px; }
  .tekst h2 { font-size: 25px; margin-top: 38px; }
  .linkkaarten { grid-template-columns: 1fr; }
  .privacy { grid-template-columns: 1fr; gap: 28px; }
  .dienstkop { padding: 0 0 56px; }
  .dienstkop__grid, .dienstkop--zonder-foto .dienstkop__grid { grid-template-columns: 1fr; gap: 0; }
  .dienstkop__foto { order: -1; margin: 0 calc(-1 * var(--gutter)) 28px; border-radius: 0; aspect-ratio: 4 / 3; }
  .dienstkop__foto--staand { width: auto; max-width: none; justify-self: stretch; }
  .dienstkop--zonder-foto .dienstkop__tekst { padding-top: 36px; }
  .dienstkop__tape { display: none; }
  .dienstkop h1 { font-size: min(38px, 11.6vw); margin: 14px 0 18px; } /* 5% ruimte rond schildersbedrijf op 320 px (2/11/26) */
  .dienstkop__intro { font-size: 18px; margin-bottom: 26px; }
  .dienstkop .held__bewijs { flex-direction: column; gap: 4px; margin-top: 22px; }
  .rij, .rij--omgekeerd { grid-template-columns: 1fr; gap: 24px; }
  .rij--omgekeerd .rij__tekst { order: 0; }
  .rij__tekst h2, .faq__grid h2 { font-size: 30px; }
  .faq__grid { grid-template-columns: 1fr; gap: 18px; }
  .faq__item summary { font-size: 17px; padding: 18px 0; }
  .faq__antwoord { padding-right: 0; }
  .tegelrij, .tegelrij--4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .legal-toc { position: static; }
  .aanvraag { padding: 32px 0 56px; }
  .aanvraag__kop h1 { font-size: 36px; }
  .contact-grid { padding-top: 40px; }
  .voet__kolommen { grid-template-columns: 1fr; gap: 28px; }
  .voet__onder { flex-direction: column; gap: 6px; }
}
@media (max-width: 560px) {
  .tegelrij, .tegelrij--4 { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .held h1 { font-size: min(38px, 11.6vw); } /* 5% ruimte rond Schilderwerken op 320 px (2/11/26) */
  .kop__logo img { width: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
a[href^="tel:"] { white-space: nowrap; }

/* 17. Reviews onder de hero (concept B "Papiertjes", Danilo met Pascal 3/11/26, includes/reviewrij.php): doorschijnende
   kaarten (eerst wit papier), elk met een strook tape, in een rij die opzij schuift (reviewrij.js). De rij loopt van rand tot
   rand; de eerste kaart lijnt uit met .wrap via --rand. Lange reviews staan op zeven regels met "Lees verder". */
.reviewrij { padding: 88px 0 calc(var(--sectie) - 40px); }
.reviewrij__kop { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.reviewrij__kop h2 { font-size: 46px; }
.reviewrij__bewijs { margin-top: 16px; font-size: 16px; color: var(--tekst); }
.reviewrij__nav { display: flex; gap: 8px; }
.reviewrij__knop { width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 1px solid var(--lijn); border-radius: var(--r-knop); color: var(--wit); cursor: pointer; transition: border-color .2s, background-color .2s; }
.reviewrij__knop:hover { border-color: var(--wit); background-color: rgba(246,240,236,.06); }
.reviewrij__knop .icon { width: 18px; height: 18px; }
.reviewrij__knop--terug .icon { transform: scaleX(-1); }
.reviewrij__knop[disabled] { opacity: .35; cursor: default; }
/* rij (venster) > spoor (schuift) > set (de kaarten). Zonder JavaScript scrolt de rij opzij met snap. Met JavaScript
   (.is-band, sinds 3/11/26 op vraag van Danilo) loopt het spoor doorlopend naar links, met een kopie van de set ernaast voor
   een naadloze lus; stil met de muis erop, te verslepen met muis en vinger (reviewrij.js). Het venster knipt aan zijn
   opvulling, dus de kaarten lopen tot aan de rand van het scherm. */
.reviewrij__rij { --rand: max(var(--gutter), calc((100% - var(--container)) / 2)); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand); padding: 44px var(--rand) 40px; scrollbar-width: none; overscroll-behavior-x: contain; }
.reviewrij__rij::-webkit-scrollbar { display: none; }
.reviewrij__rij:focus-visible { outline-offset: -2px; }
.reviewrij__spoor { display: flex; width: max-content; }
.reviewrij__set { display: flex; gap: 22px; padding-right: 22px; }
.reviewrij.is-band .reviewrij__rij { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; cursor: grab; }
.reviewrij.is-band .reviewrij__spoor { will-change: transform; }
.reviewrij.is-slepen .reviewrij__rij { cursor: grabbing; }
.reviewrij.is-slepen { -webkit-user-select: none; user-select: none; }
/* Doorschijnend sinds 3/11/26 (Pascal: "Kunt ge die doorzichtig maken?"): een waas van wit over het warme zwart, een
   fijne lichte rand en een lichtlijn bovenaan, zoals glas. Lichte tekst, dus ruim leesbaar (tekst 11:1, naam 14:1).
   Geen backdrop-filter meer: achter de kaarten ligt een effen vlak, dus een vervaging toont niets en kost rekenwerk
   zolang de band loopt. De breedte hangt aan het scherm (vw), want de set is zo breed als zijn inhoud. */
.reviewrij__kaart { position: relative; flex: 0 0 clamp(290px, 27.5vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column;
  color: var(--tekst); border-radius: var(--r-tegel); padding: 38px 32px 30px; border: 1px solid rgba(246,240,236,.13);
  background: linear-gradient(180deg, rgba(246,240,236,.075), rgba(246,240,236,.03));
  box-shadow: inset 0 1px 0 rgba(246,240,236,.08), 0 24px 48px -28px rgba(0,0,0,.8); }
.reviewrij__kaart::before { content: ""; position: absolute; top: -13px; left: 26px; width: 118px; height: 26px; background: var(--rood); clip-path: var(--tape); }
.reviewrij__kaart .sterren { vertical-align: 0; }
.reviewrij__kaart .sterren .icon { width: 18px; height: 18px; }
.reviewrij__body { flex: 1; margin: 16px 0 24px; }
.reviewrij__tekst { font-size: 17px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.reviewrij__kaart.is-open .reviewrij__tekst { display: block; }
/* De naam Pascal in de reviews (rij en tijdbalk): een rode streep eronder (Danilo 3/11/26). Met text-decoration, zodat de
   streep ook klopt als de naam op het einde van een regel staat. */
.review-naam { color: var(--wit); text-decoration-line: underline; text-decoration-color: var(--rood); text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-skip-ink: none; }
.reviewrij__meer { margin-top: 8px; padding: 0 0 2px; background: none; border: 0; border-bottom: 2px solid var(--rood); color: var(--wit); font-size: 15px; font-weight: 500; cursor: pointer; }
.reviewrij__kaart footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(246,240,236,.12); padding-top: 16px; font-size: 15px; }
.reviewrij__kaart footer b { color: var(--wit); }
.reviewrij__kaart footer span { color: var(--grijs); }
@media (max-width: 900px) {
  .reviewrij { padding: 52px 0 calc(var(--sectie) - 48px); }
  .reviewrij__kop h2 { font-size: 32px; }
  .reviewrij__nav { display: none; }
  .reviewrij__rij { padding-top: 38px; }
  .reviewrij__kaart { flex-basis: calc(100vw - 2 * var(--gutter) - 40px); padding: 34px 24px 24px; }
  .reviewrij__tekst { font-size: 16px; }
}

/* 18. Reviews als tijdbalk op de landingspagina's (concept A, Danilo 3/11/26, gp_reviewtijdbalk() en reviewtijdbalk.js):
   links de score, rechts één review tegelijk die overvloeit; per review een strook tape die volloopt (5 tot 9 seconden,
   naar de lengte van de review).
   De slides liggen op elkaar in één rastervak, zodat het blok de hoogte van de langste houdt en niets verspringt.
   Op gsm staat de tijdbalk boven de review, zoals bij verhalen: de ruimte van de langste review valt dan onderaan. */
.tijdbalk { background: var(--zwart-diep); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 56px 0; }
.tijdbalk__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: center; }
.tijdbalk--zonder-score .tijdbalk__grid { grid-template-columns: minmax(0, 1fr); }
.tijdbalk__score { border-right: 1px solid var(--lijn); padding-right: 48px; }
.tijdbalk__cijfer { font-size: 88px; font-weight: 500; letter-spacing: -.05em; line-height: 1; margin: 14px 0 10px; }
.tijdbalk__score .sterren { vertical-align: 0; }
.tijdbalk__score .sterren .icon { width: 22px; height: 22px; }
.tijdbalk__aantal { color: var(--tekst); font-size: 16px; margin: 6px 0 18px; }
.tijdbalk__rechts { min-width: 0; }
.tijdbalk__slides { display: grid; touch-action: pan-y; cursor: grab; } /* te verslepen naar de volgende of vorige */
.tijdbalk.is-slepen .tijdbalk__slides { cursor: grabbing; }
.tijdbalk.is-slepen { -webkit-user-select: none; user-select: none; }
.tijdbalk.is-slepen .tijdbalk__slide { transition: none; }
.tijdbalk__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.tijdbalk__slide.is-actief { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease; }
.tijdbalk__slide blockquote { font-size: 27px; line-height: 1.38; letter-spacing: -.015em; color: var(--wit); max-width: 860px; }
.tijdbalk__slide.is-lang blockquote { font-size: 22px; }
.tijdbalk__slide figcaption { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-size: 16px; color: var(--grijs); }
.tijdbalk__slide figcaption b { color: var(--wit); }
.tijdbalk__slide figcaption .sterren { vertical-align: 0; }
.tijdbalk__slide figcaption .sterren .icon { width: 15px; height: 15px; }
.tijdbalk__balk { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.tijdbalk__tapes { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; max-width: 520px; }
.tijdbalk__seg { position: relative; height: 22px; display: flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.tijdbalk__seg::before { content: ""; width: 100%; height: 3px; background: var(--lijn); }
.tijdbalk__seg span { position: absolute; left: 0; top: 50%; height: 10px; margin-top: -5px; width: 0; background: var(--rood); clip-path: var(--tape); }
.tijdbalk__seg.is-gedaan span { width: 100%; }
.tijdbalk__seg.is-actief span { animation: tijdbalk-vul var(--duur, 6.5s) linear forwards; } /* --duur per review, uit gp_reviewtijdbalk() */
.tijdbalk.is-gepauzeerd .tijdbalk__seg.is-actief span { animation-play-state: paused; }
@keyframes tijdbalk-vul { from { width: 0; } to { width: 100%; } }
.tijdbalk__knoppen { display: flex; gap: 8px; }
/* De tekst van de dienstpagina begint anders vlak onder de lijn van de tijdbalk */
.tijdbalk + .dienstbody { padding-top: var(--sectie); }
@media (max-width: 900px) {
  .tijdbalk { padding: 36px 0 32px; }
  .tijdbalk__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tijdbalk__score { border-right: 0; padding: 0 0 22px; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .tijdbalk__score .label { grid-column: 1 / -1; }
  .tijdbalk__cijfer { font-size: 56px; grid-row: span 2; margin: 8px 0 0; }
  .tijdbalk__aantal { margin: 0; }
  .tijdbalk__score .tekstlink { grid-column: 1 / -1; justify-self: start; margin-top: 14px; font-size: 16px; }
  .tijdbalk__slide blockquote, .tijdbalk__slide.is-lang blockquote { font-size: 19px; }
  .tijdbalk__slide figcaption { flex-wrap: wrap; gap: 6px 12px; }
  .tijdbalk__rechts { display: flex; flex-direction: column; }
  .tijdbalk__balk { order: -1; gap: 16px; margin: 0 0 22px; }
}