/* ============================================================
   AOLBERT, HUISSTIJL EN OPMAAK (per component geordend, opdracht 3 blok 15)
   ------------------------------------------------------------
   INHOUD, zoek op de kop om direct op de juiste plek te komen:
     1. FUNDAMENT, fonts, variabelen, elementen
     2. KNOPPEN, VELDEN EN FORMULIEREN
     3. TOPBALK EN PAGINAKOP
     4. NAVIGATIE EN MEGAMENU
     5. SECTIES, RASTERS EN HELDEN
     6. KAARTEN EN BOUWSTENEN
     7. REKENHULPEN EN CONFIGURATORS
     8. WINKELWAGEN EN VENSTERS
     9. VOETTEKST EN OPENINGSTIJDEN
     10. OVERIG
     11. TOEGANKELIJKHEID EN BEWEGING

   SPELREGELS
   - Elke selector staat hier PRECIES ÉÉN KEER per schermbreedte; de test
     (test2.js) bewaakt dat, want dubbele regels waren twee keer de oorzaak
     van een kapot menu.
   - Alleen deze breekpunten: 560 / 760 / 900 / 1080 / 1380 (px), ook
     bewaakt door de test.
   - Kleuren, letterafstanden en stralen komen uit de variabelen in :root.
     #C5A059 (goud) alleen op donkergroen; op licht is --gold-d de goudtint.
   - Mediaregels staan IN de sectie van hun component, direct onder de
     basisregels, wat bij elkaar hoort, staat bij elkaar.
   - EEN MEDIAREGEL MOET NA ZIJN BASISREGEL STAAN. Dit is de valkuil van dit
     bestand en hij is in ronde 9 drie keer tegelijk opgedoken. Een regel in
     @media(max-width:560px) heeft dezelfde specificiteit als de gewone regel
     met dezelfde selector, en dan wint simpelweg de LAATSTE in het bestand.
     Staat de mediaregel eerder, dan doet hij niets en zoekt u zich suf.
     Zo bleef .wrap op een telefoon zijn brede marge houden en .svc-top zijn
     twee kolommen.
   - GEEN OPMAAK IN EEN style-ATTRIBUUT. Een inline stijl wint van elke regel
     hier, dus ook van elk breekpunt: de pagina blijft dan op een telefoon in
     twee kolommen staan. Twintig plekken deden dit en duwden pagina's tot
     152 px buiten het scherm. Er staat nu een vangnet met !important onder
     560 px, maar dat is een pleister: zet nieuwe opmaak in een klasse hier.
   ============================================================ */

/* ══════ 1. FUNDAMENT, fonts, variabelen, elementen ══════ */
/* Aolbert, huisstijl: Heritage Green, Craftsman Gold, Parchment White, Industrial Charcoal

   VASTE BREEKPUNTEN, gebruik alleen deze vijf breedtes in @media-regels:
     560px   telefoon              (alles onder elkaar, kleinste details)
     760px   grote telefoon        (tabellen scrollen, balken compacter)
     900px   tablet                (kaarten in 2 kolommen, kolommen stapelen)
    1080px   klein laptopscherm    (hamburgermenu aan/uit)
    1380px   smalle desktop        (menu compacter zodat alles past)
   Komt u een andere breedte tegen of wilt u er een toevoegen: rond af
   naar de dichtstbijzijnde uit dit rijtje, anders wordt het onderhoud
   onvoorspelbaar. */
/* ---------- LETTERTYPEN, zelf gehost (geen verkeer naar Google) ----------
   Bestanden staan in assets/fonts/. woff2, latin subset, font-display swap. */
/* Twee VARIABELE fonts (opdracht 3, blok 14): elk bestand bevat alle gewichten
   in het bereik, 64 kB totaal waar eerst zeven kopieën 229 kB kostten.
   font-weight is hier een BEREIK, geen enkel getal: zo weet de browser dat hij
   elk gewicht ertussen echt kan tekenen (geen namaak-vet). Beide worden in de
   paginakop gepreload (zie gen.js). */
/* terugval met passende maat (punt 14-5): Arial op ~112% benadert de breedte
   van Montserrat, zodat de tekst niet zichtbaar verspringt bij het wisselen.
   De overrides zijn een benadering, alleen bedoeld tegen het verspringen. */
@font-face{font-family:'Montserrat-terugval';font-style:normal;font-weight:400 700;font-display:swap;src:local('Arial');size-adjust:112%;ascent-override:97%;descent-override:25%}
/* DE TWEE ECHTE LETTERTYPEN (opdracht 4, blok 1). Deze regels raakten in
   ronde 4 kwijt, waardoor de hele site stil op Arial en Georgia draaide.
   test2.js bewaakt nu dat elk gebruikt lettertype een @font-face heeft,
   dat elke preload hier voorkomt, en dat beide bestanden een fvar-tabel
   bevatten (echt variabel). NIET WEGHALEN. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('fonts/cinzel-var.woff2') format('woff2-variations')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('fonts/montserrat-var.woff2') format('woff2-variations')}
/* vangnet voor browsers zonder variabele fonts (punt 1-3): zelfde bestanden,
   dan als gewoon woff2 gelezen (de browser toont het standaardgewicht) */
@supports not (font-variation-settings:normal){
  @font-face{font-family:'Cinzel';font-style:normal;font-weight:400;
    font-display:swap;src:url('fonts/cinzel-var.woff2') format('woff2')}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;
    font-display:swap;src:url('fonts/montserrat-var.woff2') format('woff2')}
}
/* de site is bewust licht; dit voorkomt dat een browser in donkere modus zelf gaat inverteren */
:root{color-scheme:light; /* lichte site: geen browser-inversie op velden en scrollbalken */
  --green:#1A3626; --green-d:#12241a; --gold:#C5A059; --gold-d:#755D24;
  --parch:#F4F1EA; --char:#2B2B2B; --line:#E0DACB; --white:#fff;
  /* tekstgrijzen, twee, meer niet (blok 15): sec 7,5:1 en zwak 5,3:1 op perkament */
  --tekst-sec:#4d4d4d; --tekst-zwak:#5f5f5f;
  /* letterafstanden: kop (ruim) en klein (subtiel) */
  --sp-kop:.14em; --sp-klein:.04em;
  --maxw:1180px;
  /* stralen: --r kaders, --rk knoppen en velden, --r-blok zachte blokken, --r-rond pillen */
  --r:2px; --rk:10px; --r-blok:8px; --r-rond:999px;
  /* hoogte van de plakkende kopbalk, ankers springen hieronder vrij (scroll-margin) */
  --balk:82px}
@media(max-width:1080px){:root{--balk:64px}}
/* ankers landen ónder de plakkende balk in plaats van erachter (punt 15-10),    dit redt ook de skip-link voor toetsenbordgebruikers */
[id]{scroll-margin-top:calc(var(--balk) + 1rem)}
/* koppen breken gelijkmatig af; lopende tekst zonder los eindwoord (punt 15-12) */
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
/* zodra er foto's zijn: nooit uitrekken, altijd netjes vullen (punt 15-13) */
/* Elke foto vult zijn vak zonder te vervormen (opdracht 5, punt F-4).
   Zonder object-fit worden de eerste echte foto's uitgerekt in de kaarten,
   en dat valt pas op als ze er al staan. De aspect-ratio houdt de bladspiegel
   stabiel terwijl de foto nog laadt. */
.card img,.ph img,.beforeafter img,.mood img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* De overflow-wrap achteraan is het VANGNET TEGEN TEKST OVER TEKST (ronde 9).
   Aanleiding: op de verfpagina liep een prijs dwars over de kolom ernaast, en
   een kleurnaam als "Transparantgrijs" stak buiten zijn kleurvakje. Beide keer
   dezelfde oorzaak: een stuk tekst dat niet kán afbreken in een vak dat wel
   smaller wordt.
   overflow-wrap erft door naar alles, dus deze ene regel dekt de hele site.
   break-word grijpt pas in als het woord er anders niet in past; gewone zinnen
   breken gewoon op de spaties en veranderen niet.
   LET OP: dit vangnet werkt NIET bij white-space:nowrap. Waar nowrap staat,
   moet de tekst dus aantoonbaar passen. test2.js rekent dat na met de echte
   letterbreedtes uit _bouw/tekenbreedtes.js. */
body{margin:0;font-family:Montserrat,'Montserrat-terugval',-apple-system,Segoe UI,sans-serif;color:var(--char);background:var(--white);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4,.serif{font-family:Cinzel,Georgia,serif;font-weight:600;color:var(--green);letter-spacing:.01em;line-height:1.2}
h1{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .5em}
h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:2.5rem 0 1rem}
h3{font-size:1.15rem;margin:1.8rem 0 .6rem}
p{margin:0 0 1rem}
a{color:var(--green);text-decoration-color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-d)}
img{max-width:100%;display:block}
ul.check{list-style:none;padding:0;margin:0 0 1.2rem}
ul.check li{padding-left:26px;position:relative;margin-bottom:9px;font-size:.94rem}
ul.check li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
/* ============ TOEGANKELIJKHEID (WCAG 2.2 AA) ============ */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--green-d);padding:12px 20px;z-index:300;font-weight:600;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:2px}
.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}
h2+.section-intro,h1+.section-intro{margin-top:-.4rem}
body.is-zakelijk .zakelijk-only{display:block}
a.fcontact:hover{color:var(--gold)}
body.is-zakelijk div.alleen-zakelijk{display:block}
body.is-zakelijk a.alleen-zakelijk{display:inline-block}
/* voorkom dat lange woorden op smalle schermen buiten de kaart lopen */
h1,h2,h3,h4{overflow-wrap:break-word}
@media(min-width:900px){
 h1{margin-bottom:.6em}
}
@mediaprint{
 body{font-size:11pt}
}

/* ══════ 2. KNOPPEN, VELDEN EN FORMULIEREN ══════ */
.btn.ghost{background:transparent;color:var(--parch);border-color:rgba(244,241,234,.5);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(197,160,89,.08)}
.btn.dark{background:var(--green);color:var(--parch);border-color:var(--green)}
.btn.dark:hover{background:var(--green-d);color:var(--gold)}
label{display:block;font-size:.8rem;font-weight:600;color:var(--green);margin-bottom:5px;letter-spacing:var(--sp-klein)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #cfc8b6;background:var(--white);font-family:inherit;font-size:.94rem;color:var(--char);border-radius:var(--r-blok)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:-1px;border-color:var(--green)}
.hint{font-size:.8rem;color:var(--tekst-zwak);margin-top:10px}
/* -- foutmeldingen bij velden (opdracht 5, blok C) --
   Nooit alleen kleur (WCAG 1.4.1): er staat altijd tekst, en er komt een
   waarschuwingsteken vóór de melding dat ook in zwart-wit te zien is. */
.veldfout{display:flex;gap:8px;align-items:flex-start;margin:6px 0 0;
 font-size:.84rem;line-height:1.45;color:#8a2f16;font-weight:500}
.veldfout::before{content:"!";flex:0 0 auto;width:17px;height:17px;margin-top:1px;
 border-radius:var(--r-rond);background:#8a2f16;color:var(--white);
 font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.veldfout[hidden]{display:none}
input.veld-fout,select.veld-fout,textarea.veld-fout{border-color:#8a2f16;
 box-shadow:0 0 0 3px rgba(138,47,22,.12)}
/* Zolang er een fout staat, tonen wij geen bedrag: een prijs die op onzin
   is gebaseerd doet meer kwaad dan geen prijs. De .show in de eerste
   selector is nodig omdat .result.show verderop display:block zet; zonder
   die extra klasse zijn ze even sterk en wint de laatste regel. */
.grens-fout .result.show,.grens-fout .samenvatting,.grens-fout .prijsbalk{display:none}
/* samenvatting bovenaan een formulier, met links naar de foute velden */
.foutsamenvatting{border:1.5px solid #8a2f16;background:#fdf3f0;border-radius:var(--r-blok);
 padding:14px 16px;margin:0 0 18px}
.foutsamenvatting b{color:#8a2f16}
.foutsamenvatting ul{margin:8px 0 0;padding-left:1.2rem}
.foutsamenvatting a{color:#8a2f16;font-weight:600}
.foutsamenvatting[hidden]{display:none}
/* versieregel bovenaan de juridische pagina's: wanneer is dit bijgewerkt */
.versieregel{font-size:.86rem;color:var(--tekst-sec);border-left:3px solid var(--gold);
 padding:2px 0 2px 14px;margin:0 0 1.4rem}
/* de zin die blijft hangen, onderaan een dienstpagina (punt D-14) */
.slotzin{font-family:Cinzel,Georgia,serif;font-size:1.22rem;line-height:1.45;
 text-align:center;color:var(--green);max-width:34ch;margin:0 auto;text-wrap:balance}
/* het citaat van de vakman die dit werk doet (punt D-15) */
.vakcitaat{margin:0;padding:26px 0}
.vakcitaat blockquote{margin:0 auto;max-width:52ch;font-size:1.1rem;line-height:1.6;
 color:var(--char);border-left:3px solid var(--gold);padding-left:20px}
.vakcitaat figcaption{margin:10px auto 0;max-width:52ch;padding-left:23px;
 font-size:.86rem;color:var(--tekst-zwak);letter-spacing:var(--sp-klein)}
/* vaste voetnoot onder een winkelcategorielijst (opdracht 5, punt D-2) */
.winkelvoet{margin-top:1.6rem;padding-top:14px;border-top:1px solid var(--line);
 font-size:.86rem;color:var(--tekst-sec)}
.winkelvoet p{margin:0 0 6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
/* doelgrootte minimaal 24px */
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-width:22px;accent-color:var(--green);cursor:pointer}
label:has(input[type=checkbox]),label:has(input[type=radio]){min-height:44px;padding:4px 0;cursor:pointer}
button,.btn{min-height:44px}
.result{background:var(--green);color:var(--parch);padding:20px 24px;margin-top:18px;display:none;border-left:4px solid var(--gold)}
.result.show{display:block}
.result .big{font-family:Cinzel,serif;font-size:1.75rem;color:var(--gold);display:block;line-height:1.2;margin-bottom:8px}
.result small{color:#d8d3c4;font-size:.86rem;display:block;margin-top:8px;line-height:1.6}
input[type=search]{appearance:none}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#755D24 50%),linear-gradient(135deg,#755D24 50%,transparent 50%);
 background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.resultbalk{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}
.resultbalk b{font-family:Cinzel,serif;color:var(--green)}
/* ============ INFO-KNOPJE MET UITLEG ============ */
button.info{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--gold-d);
 border-radius:50%;background:transparent;color:var(--gold-d);cursor:help;padding:0;margin-left:6px;font-family:inherit;
 vertical-align:-.35em;min-height:28px;position:relative}
button.info .ic{width:14px;height:14px;stroke-width:2}
/* Het i-knopje blijft 28 px, want het staat middenin een zin en 44 px zou
   de regel uit elkaar trekken. Het RAAKVLAK wordt wel 44 px, met een
   onzichtbaar vlak eromheen (opdracht 5, punt K-1). Zo haalt ook dit
   knopje de maat die NN/g en Apple aanhouden, zonder dat het opvalt. */
button.info:before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
button.info:hover,button.info[aria-expanded=true]{background:var(--gold-d);color:var(--white)}
.infoballon:after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--green-d)}
button.info[aria-expanded=true] .infoballon{display:block}
.knopklein{min-width:44px;min-height:44px;padding:2px 12px;font-size:.82rem;font-family:inherit;
 background:var(--white);border:1px solid var(--green);color:var(--green);border-radius:var(--r-blok);cursor:pointer}
.knopklein:hover{background:var(--green);color:var(--parch)}
.knopklein.licht{border-color:rgba(244,241,234,.6);color:var(--parch);background:transparent}
.knopklein.licht:hover{background:var(--gold);border-color:var(--gold);color:var(--green-d)}
.knopklein.weg:hover{background:#8a2f2f;border-color:#8a2f2f;color:var(--white)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:var(--green-d);padding:15px 30px;text-decoration:none;font-weight:600;font-size:.92rem;border-radius:var(--rk);border:1px solid var(--gold);letter-spacing:var(--sp-klein);cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(43,43,43,.10);transition:background .18s ease,color .18s ease,transform .15s ease}
.btn:hover{background:color-mix(in srgb, var(--gold) 70%, white);color:var(--green-d);box-shadow:0 8px 20px rgba(43,43,43,.16);transform:translateY(-1px)}
/* De breedte was hard 270px (ronde 9 aangepast). De ballon hangt gecentreerd
   boven een klein vraagtekenknopje, dus hij stak 135 px aan elke kant uit.
   Bij een veld dicht bij de rand, en op een telefoon van 320 of 375 px, viel
   hij daardoor deels buiten beeld en was de uitleg niet te lezen.
   min() maakt hem nooit breder dan het scherm; op ruimte houdt hij zijn
   vertrouwde 270 px. */
.infoballon{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:min(270px,86vw);background:var(--green-d);color:var(--parch);padding:14px 16px;font-size:.83rem;line-height:1.6;z-index:120;text-align:left;font-weight:400;box-shadow:0 8px 26px rgba(0,0,0,.3);border-top:2px solid var(--gold);display:none;cursor:default;border-radius:var(--rk)}
/* kitkleuren: klikbare stalen */
button.ks{background:var(--white);border:1px solid var(--line);padding:0;cursor:pointer;font:inherit;text-align:left}
button.ks:hover{border-color:var(--gold)}
button.ks[aria-pressed=true]{outline:3px solid var(--gold-d);outline-offset:2px}
/* veldnaam met info-knopje ernaast */
.veldkop{display:flex;align-items:center;gap:2px}
.veldkop label{margin:0}
/* honingpotveld tegen spam: buiten beeld, maar niet display:none (dan vullen bots hem niet) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){
 .infoballon{width:230px}
}

/* ══════ 3. TOPBALK EN PAGINAKOP ══════ */
/* ---------- header ---------- */
.topbar{background:var(--green-d);color:#cfd8d1;font-size:.8rem;letter-spacing:var(--sp-klein)}
/* De bovenbalk is een RASTER met drie vaste kolommen (opdracht 6, punt A-1).
   Hier stond flex met justify-content:space-between. Dat verdeelt de over-
   gebleven ruimte over de tussenruimtes, dus zodra één tekst langer werd,
   verschoof alles: het adres kroop naar rechts en "Vandaag open vanaf 08:00"
   sprong naar een tweede regel. Met vaste kolommen staat elk onderdeel
   altijd op dezelfde plek, hoe lang de tekst ook is. */
.topbar .wrap{display:grid;grid-template-columns:auto 1fr auto;
 align-items:center;gap:24px;min-height:44px}
/* overflow:hidden is hier het vangnet (ronde 9). De middenkolom is 1fr met
   min-width:0, dus hij mag tot nul krimpen, maar de klokregel erin heeft
   white-space:nowrap en krimpt niet mee. Het gevolg was dat die tekst met
   justify-content:center naar BEIDE kanten uit de kolom puilde en dwars over
   de tabbladen links en het telefoonnummer rechts kwam te liggen: gemeten
   66 px overlap bij 760 px en 78 px bij 885 px vensterbreedte, op alle
   pagina's. Met overflow:hidden kan er niets meer buiten de kolom komen,
   wat er ook in staat. */
.topbar-midden{display:inline-flex;align-items:center;gap:18px;
 justify-content:center;min-width:0;overflow:hidden}
.topbar-contact{justify-self:end;white-space:nowrap}
/* de winkelregel wijkt als eerste als het krap wordt: het adres staat ook
   in de voettekst en op contact.html, de klok en de contactgegevens niet */
#ot-kort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar a{color:#e8e2d4;text-decoration:none}
.topbar a:hover{color:var(--gold)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{width:52px;height:52px;border-radius:2px}
.brand b{font-family:Cinzel,serif;color:var(--parch);font-size:1.35rem;letter-spacing:var(--sp-kop);display:block;line-height:1}
.brand small{color:var(--gold);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;display:block;margin-top:3px}
/* ---------- melding afwijkende openingstijden ---------- */
.ot-balk{background:var(--gold);color:var(--green-d);font-size:.86rem;font-weight:600}
.ot-balk .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;min-height:44px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.ot-balk a{color:var(--green-d);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
header.site :focus-visible,.hero :focus-visible,.band :focus-visible,footer.site :focus-visible,.topbar :focus-visible{outline-color:var(--gold)}
/* Binnen die donkere vlakken zitten twee LICHTE eilanden: het hulpblok in het
   megamenu en de zwevende winkelbalk. Daar is de gouden ring vrijwel
   onzichtbaar: goud op perkament haalt 2,18 op 1 en de norm voor een
   focusring is 3,0. Groen op perkament haalt 11,64. Nagerekend met de
   WCAG-formule voor relatieve luminantie. */
header.site .subhulp :focus-visible,.subhulp :focus-visible,
.cartbar :focus-visible,.wg-toast :focus-visible{outline-color:var(--green)}
.topbar a,footer.site a{display:inline-flex;align-items:center;min-height:44px;padding-top:5px;padding-bottom:5px}
/* ---------- particulier / zakelijk, site-breed ---------- */
/* particulier/zakelijk: subtiele schakelaar, opgenomen in de topbar */
.modewrap{display:inline-flex;align-items:stretch;gap:10px;align-self:stretch}
/* de drie tabbladen Consument / Professional / Werken bij (opdracht 4,
   blok 3). Het actieve tabblad krijgt de kleur van de kopbalk ERONDER en
   geen onderrand, waardoor hij visueel doorloopt in de balk; de andere
   twee blijven op de donkere bovenbalk staan. */
/* flex-wrap erbij in ronde 9: op een scherm van 320 px was deze rij 321 px
   breed en kreeg de hele pagina daardoor een horizontale schuifbalk. Nu
   valt "Werken bij" desnoods op een tweede regel. */
.voorwie{display:inline-flex;align-items:stretch;gap:2px;flex-wrap:wrap;max-width:100%}
.voorwie a{display:inline-flex;align-items:center;padding:0 15px;min-height:44px;
 font-size:.76rem;font-weight:600;letter-spacing:var(--sp-klein);color:var(--parch);
 opacity:.85;border-radius:0}
.voorwie a:hover{opacity:1;color:var(--gold)}
.voorwie a[aria-current]{background:var(--green);opacity:1;color:var(--gold)}
/* Werken bij is geen schakelaar maar een bestemming (opdracht 6, punt B-4).
   Alledrie dezelfde stijl gaf de indruk van drie standen van hetzelfde ding.
   Een scheidingslijn en wat lucht ervoor maken het onderscheid zichtbaar
   zonder dat het een vreemde eend wordt. */
/* .voorwie a hierboven zet padding:0 15px, dus deze regel moet even
   specifiek zijn, anders wint die en blijft de inspringing weg */
.voorwie a.voorwie-pagina{margin-left:10px;padding-left:20px;position:relative}
.voorwie a.voorwie-pagina::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
 width:1px;height:18px;background:rgba(232,226,212,.3)}
/* op de werken-bij-pagina zelf licht alleen dat tabblad op; de modustab
   doet daar even een stap terug, twee actieve tabs leest als een fout */
.voorwie:has(a[aria-current="page"]) a[aria-current="true"]{background:transparent;color:var(--parch);opacity:.85}
/* Opvallender sinds dit de ENIGE btw-schakelaar is (opdracht 3, punt 2-8).
   De min-width is de tweede maatregel tegen het verspringen uit opdracht 6
   punt A-2: beide teksten zijn nu ongeveer even lang ("Prijzen inclusief
   btw" en "Prijzen exclusief btw"), en deze breedte vangt het laatste
   verschil op zodat er bij het wisselen letterlijk niets beweegt. */
.modeuitleg{font-size:.72rem;color:#9fb3a6;letter-spacing:var(--sp-klein);
 align-self:center;min-width:12em;white-space:nowrap}
/* "Nu open tot 18:00" in de bovenbalk (opdracht 5, punt G-3).
   De tekst zegt het, het bolletje is er alleen bij: kleur mag nooit de
   enige drager van betekenis zijn (WCAG 1.4.1). */
.nu-open{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;
 letter-spacing:var(--sp-klein);white-space:nowrap;align-self:center}
.nu-open::before{content:"";width:7px;height:7px;border-radius:var(--r-rond);background:currentColor}
.nu-open[data-staat=open]{color:#8fd0a6}
.nu-open[data-staat=dicht]{color:#cfd8d1}
.modelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.model{border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column}
.model .ph{aspect-ratio:2/3;border:none}
.model .mb{padding:14px 16px 16px}
.model h4{margin:0 0 3px;font-family:Cinzel,serif;color:var(--green);font-size:.95rem}
.model .serie{font-size:.72rem;color:var(--gold-d);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.model p{font-size:.8rem;color:var(--tekst-sec);margin:8px 0 0;line-height:1.5}
/* ============ WINKELWAGEN ============ */
/* knop met teller in de kopregel */
/* eigen, onkrimpbare plek naast de afspraakknop (opdracht 3, punt 1-4) */
.wagenknop{flex:0 0 auto;margin-left:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;
 width:44px;height:44px;color:var(--parch)}
.wagenknop:hover{color:var(--gold)}
.wagenknop .ic{width:26px;height:26px}
/* Actieve klus onder het wagenicoon (opdracht 3, punt 8-5), absoluut
   gepositioneerd zodat de kopbalk er nooit breder van wordt en de
   menupassing op 1280 px niet in gevaar komt.
   Hij stond met right:0 tegen de rechterkant geplakt en hing daardoor
   scheef onder het icoon (opdracht 6, punt C-1). Nu staat hij gecentreerd
   onder het midden van de knop. Er is bewust ÉÉN ankerpunt gekozen voor
   het aantal (het bolletje rechtsboven, de bekendste plek) en één voor de
   klusnaam (gecentreerd eronder); ze concurreren niet meer (punt C-2).
   Een klusnaam als "Dorpsstraat 12" past niet in 44 px, dus hij mag
   breder worden dan de knop en wordt afgekapt met een beletselteken; de
   volledige naam staat in de title van de knop (punt C-3). */
/* max-width was 112px (ronde 9 teruggebracht naar 88px). De knop is 44 px en
   het label staat gecentreerd, dus 112 px stak er 34 px aan elke kant buiten.
   De wagenknop is het laatste element in de kopbalk, en die heeft 24 px
   binnenmarge: bij een venster tussen 1081 en 1230 px viel dat label daardoor
   buiten de pagina en kreeg de hele site een horizontale schuifbalk.
   88 px steekt 22 px uit en blijft dus binnen de marge. */
.wagen-klus{position:absolute;top:calc(50% + 13px);left:50%;transform:translateX(-50%);
 max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
 font-size:.6rem;letter-spacing:.02em;color:var(--gold);line-height:1}
@media(max-width:1080px){.wagen-klus{display:none}}
.wagen-n{position:absolute;top:1px;right:-2px;min-width:19px;height:19px;border-radius:var(--rk);
 background:var(--gold);color:var(--green-d);font-size:.68rem;font-weight:700;
 display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.wagen-n[hidden]{display:none}
header.site{background:var(--green);color:var(--parch);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(197,160,89,.35);transition:box-shadow .25s ease}
header.site .wrap{display:flex;align-items:center;gap:28px;min-height:82px;transition:min-height .25s ease;position:relative}
header.site.gescrold{box-shadow:0 4px 22px rgba(18,36,26,.30)}
header.site.gescrold .wrap{min-height:64px}
/* ── toegevoegd na de review ───────────────────────────────────────────── */
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid rgba(244,241,234,.4);color:var(--parch);font-size:.9rem;line-height:1;padding:8px 12px;border-radius:var(--r-blok);cursor:pointer;align-items:center;gap:8px;font-family:inherit;min-height:44px}
.navtoggle-tx{letter-spacing:var(--sp-klein);text-transform:uppercase;font-size:.74rem;font-weight:600}
/* "Voor vakmensen" in de bovenbalk, naast de zakelijk-schakelaar (punt 1-7) */
/* (de losse "Voor vakmensen"-pill is in ronde 5 opgegaan in het
   Professional-tabblad hierboven; de professionals-pagina blijft bereikbaar
   via de hoofdknop in de Professional-modus en via de voettekst) */
@media(max-width:1380px){
 header.site .wrap{gap:16px}
 .brand small{display:none}
}
@media(max-width:1080px){
 .wagenknop{margin-left:0}
 .navtoggle{display:inline-flex;margin-left:auto}
}
@media(max-width:760px){
 .modeuitleg{display:none}
}
@media(max-width:560px){
 /* op een telefoon past het raster niet meer naast elkaar: dan wordt het
    één gecentreerde kolom, in dezelfde volgorde als op een breed scherm */
 .topbar .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:4px;padding-top:6px;padding-bottom:6px}
 .topbar-contact{justify-self:center}
 header.site .wrap{gap:10px}
 .brand small{display:none}
 /* Op een scherm van 320 px vroeg de kopbalk 365 px: het merk 166, de
    menuknop 87, de wagenknop 44, plus tussenruimte en marges. De wagenknop
    stak er 21 px buiten en de hele pagina kreeg een horizontale schuifbalk
    (ronde 9). Hieronder halen wij die 45 px eraf, en min-width:0 op het merk
    is het vangnet: past het bij een nog kleiner scherm alsnog niet, dan kapt
    de merknaam af in plaats van de pagina scheef te trekken. */
 /* de smallere bladspiegel staat verderop, in het 560-blok NA de basisregel
    van .wrap; hier zou hij niets doen (zie de uitleg daar) */
 /* flex-shrink op 1: de basisregel zet .brand op flex:0 0 auto en dan houdt
    het merk zijn volle breedte, hoe smal het scherm ook is. Met 0 1 auto mag
    hij als laatste redmiddel krimpen; min-width:0 geeft hem daarvoor
    toestemming en de regel hieronder kapt de naam dan netjes af. */
 .brand{flex:0 1 auto;min-width:0}
 .brand img{width:44px;height:44px}
 .brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
}
/* Hier stond @mediaprint{...}, zonder spatie tussen "media" en "print"
   (ronde 9 verwijderd). Een browser leest dat als een onbekende at-regel en
   slaat hem over, dus dit blok heeft nooit iets gedaan. Het echte printblok
   staat onderaan dit bestand en is compleet; de enige regel die daar nog
   ontbrak, .cartbar, is daar toegevoegd. */

/* ══════ 4. NAVIGATIE EN MEGAMENU ══════ */
nav.main>*{flex:0 0 auto}
/* Drie duidelijk verschillende statussen, ALLE DRIE ZONDER EIGEN
   ACHTERGRONDKLEUR (ronde 9). Tot nu toe kreeg een menuknop bij hover een
   gouden waas en bij openen de donkere paneelkleur. De balk bestond daardoor
   uit drie kleuren tegelijk: de balk zelf rgb(26,54,38), een geopende knop
   rgb(18,36,26) en daar bovenop nog de waas. Dat oogde als een losse vlek in
   de balk, en de oude reden ervoor gaat niet meer op: het brede paneel hangt
   sinds ronde 5 onder de VOLLE kopbalk, dus een knop van honderd pixels sluit
   toch nergens naadloos op aan.
   Nu doet de onderstreping al het werk, net als bij de actieve pagina:
   WAAR BEN IK  = actief: gouden tekst met een gouden onderrand
   WAAR WIJS IK = hover/focus: onderrand half goud, tekst blijft perkament
   WAT IS OPEN  = gouden onderrand plus de pijl die omklapt en goud wordt  */
nav.main a:hover,nav.main a:focus-visible{color:var(--parch);background:transparent;border-bottom-color:rgba(197,160,89,.55)}
nav.main a.active{color:var(--gold);border-bottom-color:var(--gold)}
nav.main a.active:hover,nav.main a.active:focus-visible{color:var(--gold);background:transparent;border-bottom-color:var(--gold)}
nav.main a.cta{background:var(--gold);color:var(--green-d);font-weight:600;border-radius:var(--rk);margin-left:8px;border-bottom:none;padding:11px 16px}
nav.main a.cta:hover{background:color-mix(in srgb, var(--gold) 70%, white);color:var(--green-d)}
/* ---------- navigatie met submenu's ---------- */
.has-sub{display:inline-flex;align-items:center;white-space:nowrap;position:relative}
/* Open paneel: GEEN afwijkende achtergrond meer (ronde 9, zie de uitleg bij de
   drie statussen hierboven). Welke knop bij het paneel hoort, laten wij zien
   met een gouden onderrand en een pijl die omklapt. De balk houdt daardoor op
   elk moment één egale kleur. */
nav.main .has-sub.open,nav.main .has-sub:focus-within{background:transparent}
/* Welke knop bij het geopende paneel hoort, laten wij zien met een GOUDEN
   ONDERSTREPING plus de pijl die omklapt en goud wordt. Zo blijft het
   onderscheid met de pagina waar je bent bewaard: die heeft naast de gouden
   onderstreping ook gouden tekst. Kleur is niet de enige drager van
   betekenis, want de omgeklapte pijl zegt hetzelfde (WCAG 1.4.1). */
nav.main .has-sub.open>a,nav.main .has-sub:focus-within>a{border-bottom-color:var(--gold)}
/* min-width:0 laat het menu krimpen in plaats van over de winkelwagen en de
   afspraakknop heen te schuiven (opdracht 3, punt 1-4) */
/* Brede panelen ankeren aan de NAVIGATIEBALK in plaats van aan de menuknop
   (opdracht 2, punt 1-1, naar NN/g's megamenu-vorm): dan is het paneel nooit
   breder dan het menu en kan het per definitie niet van het scherm lopen.
   Browsers zonder :has() houden het oude gedrag; daarvoor vangt overflow-x
   hieronder het ergste af. */
nav.main{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:nowrap;min-width:0;position:static}
/* het brede paneel ankert sinds ronde 5 aan de VOLLE KOPBALKBREEDTE, niet aan
   de (smallere) navigatiebalk: vier kolommen plus het hulpblok hebben die
   ruimte nodig (opdracht 4, blok 2). nav.main is daarom static en de
   header-wrap hieronder is de positioneringscontext. Het item met een
   sub-groot verliest hieronder zijn eigen positionering via :has (door alle
   huidige browsers ondersteund); de paneelregel zelf staat bij .sub-groot
   en daar is er bewust maar EEN van (opdracht 3, punt 1-1). */
nav.main .has-sub:has(>.sub-groot){position:static}
.has-sub>a:after{content:""}
.subtoggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:none;color:var(--parch);cursor:pointer;border-radius:6px;margin-left:-7px;margin-right:2px}
.subtoggle:hover{color:var(--gold)}
.subtoggle svg{width:13px;height:13px;transition:transform .18s ease}
.has-sub.open>.subtoggle svg{transform:rotate(180deg)}
.has-sub.open>.subtoggle{color:var(--gold)}
.sub{display:none;position:absolute;top:100%;left:0;background:var(--green-d);border:1px solid rgba(197,160,89,.4);min-width:250px;padding:8px 0;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.has-sub.open .sub,.has-sub:focus-within .sub{display:block}
.has-sub.gesloten:hover .sub,.has-sub.gesloten:focus-within .sub{display:none}
.sub a{display:block;padding:9px 18px;font-size:.85rem;color:var(--parch);text-decoration:none;border-bottom:none;white-space:nowrap}
.sub a:hover{background:rgba(197,160,89,.16);color:var(--gold);border-bottom:none}
.sub a.sub-overzicht{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(197,160,89,.3);margin-bottom:5px}
.sub .kop{padding:9px 18px 5px;font-size:.68rem;letter-spacing:var(--sp-kop);text-transform:uppercase;color:var(--gold);font-weight:700}
/* padding 10px i.p.v. 12: zeven ingangen + knop + winkelwagen moeten binnen de
   wrap van 1180 px passen, 12px gaf 29px overlap op brede schermen (punt 1-4/1-6) */
nav.main a{display:flex;align-items:center;color:var(--parch);text-decoration:none;font-size:.86rem;line-height:1.4;padding:9px 9px;letter-spacing:var(--sp-klein);border-bottom:3px solid transparent;min-height:44px}
/* Het vroegere Meer-menu is opgeheven (opdracht 3, punt 1-7): "Over ons"
   staat gewoon in de balk en "Voor vakmensen" in de bovenbalk, vijf
   ingangen passen op één regel, ook op 1280 px. */
/* ============ GEGROEPEERD SUBMENU (Diensten, De winkel) ============
   Desktop: groepen als kolommen naast elkaar, kolomsgewijs te scannen.
   Mobiel: elke groepskop is een tweede accordeonlaag. */
/* DE ene paneelregel (opdracht 3, punt 1-1, de oude width:max-content-regel
   is verwijderd, die vocht met de verankering en gaf een schuifbalk):
   even breed als de navigatiebalk, nooit hoger dan de vouw. */
.sub-groot{left:0;right:0;width:auto;max-width:none;padding:12px 26px 12px;max-height:min(74vh,560px);overflow-y:auto}
/* kolommen breken vanzelf af als er te weinig ruimte is (punt 1-2),    grid-auto-flow:column dwong alles op één rij en dát gaf de afgesneden kolommen */
/* vaste vier kolommen (opdracht 4, punt 2-3): het aantal groepen is bekend,
   dus auto-fit is hier fout; die liet de vierde kolom naar een tweede rij
   afbreken met een groot gat ernaast */
/* Het aantal kolommen komt uit gen.js mee als --kol. Bij vier vaste kolommen
   liet een paneel met een groep, zoals Glas, drie lege kolommen zien. */
.subkolommen{display:grid;grid-template-columns:repeat(var(--kol,4),1fr);gap:4px 28px;align-items:start}
.subgroep{display:block}
/* icoon per groepskop (punt 2-7): structuur zonder drukte.
   De breedte staat in een variabele omdat de links eronder er precies mee
   moeten inspringen; zie de uitlijnregel hieronder. */
:root{--gi-breedte:24px}   /* 16px icoon + 8px marge */
.subgroep .gi,.subhulp .gi{display:inline-flex;width:16px;height:16px;margin-right:8px;vertical-align:-2px;color:var(--gold-d)}
.subgroep .gi svg,.subhulp .gi svg{width:16px;height:16px}
/* UITLIJNING VAN KOP EN LINKS (opdracht 6, punt C-4).
   De kolomkoppen beginnen met een icoon, de links eronder niet. Daardoor
   stond de koptekst 15 pixels verder naar rechts dan de links, en dat zie
   je meteen als er vier kolommen naast elkaar staan. De links springen nu
   precies de breedte van het icoon in, zodat beide teksten op dezelfde
   lijn beginnen. Verandert het icoon van maat, pas dan --gi-breedte aan. */
nav.main .subkolommen .groeplinks a,
nav.main .subrij2 .groeplinks a{padding-left:var(--gi-breedte)}
/* Maatwerk en montage in een eigen rij (punt 2-2): werkwijze, geen bouwdeel.
   Het raster is HETZELFDE als dat van de bovenste rij (opdracht 6, punt
   C-5): vier gelijke kolommen, waarvan de links er drie beslaan en het
   hulpblok de vierde. Met 2fr/1fr lijnde er niets uit met de rij erboven. */
.subrij2{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 28px;align-items:start;border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.subrij2>.subgroep{grid-column:1/4}
.subrij2 .groeplinks{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.subrij2 .groeplinks a{padding-top:6px;padding-bottom:6px}
/* het hulpblok in de laatste kolom (punt 2-4); compact, want dit blok
   bepaalt de hoogte van de onderste rij en het paneel moet zonder
   schuifbalk passen bij 1280 x 720 (punt 2-5) */
.subhulp{background:var(--parch);border:1px solid var(--line);border-radius:var(--r-blok);padding:10px 13px;display:flex;flex-direction:column;gap:5px;font-size:.82rem;line-height:1.45;color:var(--tekst-sec);white-space:normal;min-width:0}
.subhulp .kop{font-weight:700;color:var(--char);display:flex;align-items:center;font-size:.78rem;letter-spacing:var(--sp-klein);text-transform:uppercase}
nav.main .subhulp a{display:inline;padding:0;min-height:0;color:var(--gold-d);font-weight:600;opacity:1;border-bottom:none}
nav.main .subhulp a.subhulp-knop{display:inline-flex;align-self:flex-start;padding:7px 13px;font-size:.78rem;color:var(--white)}
/* De overzichtslink is een vangnet en hoort onderaan (punt 2-6).
   Hij springt even ver in als de links in de eerste kolom, zodat hij op
   dezelfde lijn begint en niet los onder het raster hangt (punt C-6). */
.sub a.sub-overzicht-onder{border-bottom:none;border-top:1px solid rgba(197,160,89,.3);
 margin:6px 0 0;padding-top:8px;padding-left:var(--gi-breedte)}
.groeptoggle{display:block;width:100%;background:none;border:none;padding:9px 0 5px;margin:0;
 text-align:left;cursor:default;font-family:inherit}
.groeptoggle .kop{padding:0;display:inline}
.groeptoggle svg{display:none;width:14px;height:14px;transition:transform .18s ease}
.groeplinks{display:block}
.groeplinks a{white-space:nowrap}
@media(max-width:1380px){
 nav.main{gap:2px}
 nav.main a{font-size:.8rem;padding:9px 8px;letter-spacing:var(--sp-klein)}
 nav.main a.cta{padding:10px 14px;margin-left:6px}
}
@media(max-width:1080px){
 /* mobiel: accordeon, groepen staan dicht, één tik klapt open */
 .has-sub{display:flex;flex-wrap:wrap;align-items:center;white-space:normal;border-bottom:1px solid rgba(244,241,234,.12)}
 .has-sub>a:after{content:""}
 .subtoggle{display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;
  background:none;border:none;color:var(--parch);cursor:pointer;padding:0}
 .subtoggle svg{transition:transform .18s ease}
 .has-sub.open .subtoggle svg{transform:rotate(180deg)}
 .has-sub.open .subtoggle{color:var(--gold)}
 .sub,.has-sub:hover .sub,.has-sub:focus-within .sub{display:none}
 .has-sub.open .sub{display:block;position:static;border:none;box-shadow:none;background:transparent;
  padding:0 0 10px 14px;min-width:0;width:100%}
 .sub a.sub-overzicht{border-bottom:1px solid rgba(197,160,89,.3)}
 nav.main a{padding:12px 0;border-bottom:1px solid rgba(244,241,234,.12);display:flex;line-height:1.5;align-items:center;font-size:.92rem;min-height:48px}
 .has-sub>a{flex:1 1 auto;border-bottom:none;padding:12px 0}
 .sub a{padding:8px 0;font-size:.85rem;opacity:.9;border-bottom:1px solid rgba(244,241,234,.08);white-space:normal;min-height:44px;display:flex;align-items:center}
 /* afspraakknop bovenaan het menu, direct zichtbaar */
 nav.main a.cta{margin:12px 0 8px;text-align:center;order:-1;min-height:48px;justify-content:center}
 nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--green-d);flex-direction:column;align-items:stretch;padding:6px 20px 16px;gap:0;margin:0;max-height:calc(100vh - 96px);overflow:auto}
 nav.main.open{display:flex}
 nav.main a.sec{font-size:.84rem;min-height:44px;opacity:.92}
 nav.main a.sec .mi{opacity:.8}
 /* in het uitklapmenu staan de drie links gewoon los, met icoon */
 nav.main>a.sec{display:flex}
 nav.main a.sec-contact{font-size:.84rem;min-height:44px;opacity:.92}
 .sub-groot{width:100%;max-width:none;padding:0 0 10px 14px}
 .subkolommen{display:block}
 .groeptoggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  min-height:44px;padding:8px 0;border-bottom:1px solid rgba(244,241,234,.08);color:var(--parch)}
 .groeptoggle svg{display:block;color:var(--gold)}
 .subgroep.open .groeptoggle svg{transform:rotate(180deg)}
 .groeplinks{display:none;padding-left:12px}
 .subgroep.open .groeplinks{display:block}
 .groeplinks a{white-space:normal}
 /* het hulpblok is desktopcontext; op mobiel is het paneel een accordeon
    en telt elke regel (opdracht 4, blok 2) */
 .subhulp{display:none}
 .subrij2{display:block;border-top:none;margin:0;padding:0}
 .subrij2 .groeplinks{display:none;grid-template-columns:none}
 .subrij2 .subgroep.open .groeplinks{display:block}
 .sub a.sub-overzicht-onder{border-top:none}
}

/* ══════ 5. SECTIES, RASTERS EN HELDEN ══════ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
/* ---------- hero ---------- */
.hero{background:var(--green);color:var(--parch);padding:0;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding-top:96px;padding-bottom:96px}
.hero h1{color:var(--parch);margin-bottom:.4em;font-size:clamp(2.1rem,4.6vw,3.4rem)}
.hero .lead{font-size:1.16rem;color:#dfd9c9;max-width:32em;line-height:1.75}
.hero .kicker{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;margin-bottom:1.4rem;font-weight:600;
 display:inline-flex;align-items:center;gap:14px}
.hero .kicker:before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.4rem}
.hero-card{background:rgba(244,241,234,.06);border:1px solid rgba(197,160,89,.45);padding:32px;border-radius:14px}
.hero-card h3{color:var(--gold);font-size:.98rem;margin:0 0 14px;letter-spacing:var(--sp-klein)}
.hero-card ul{margin:0;padding-left:18px;color:#dfd9c9;font-size:.92rem}
.hero-card li{margin-bottom:8px}
/* ---------- sections ---------- */
section{padding:64px 0}
section.alt{background:var(--parch)}
section.tight{padding:44px 0}
.eyebrow{color:var(--gold-d);letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;font-weight:700;margin-bottom:.6rem}
.section-intro{max-width:62ch;color:#4a4a4a}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* ---------- band ---------- */
.band{background:var(--green);color:var(--parch);padding:52px 0}
.band h2{color:var(--parch)}
.band p{color:#dfd9c9}
.band.gold{background:var(--gold);color:var(--green-d)}
.band.gold h2,.band.gold p{color:var(--green-d)}
/* ---------- twee-koloms secties, responsief ---------- */
/* .svc-top is de kop van elke dienstpagina: tekst links, beeld rechts. Deze
   instelling stond als INLINE STIJL in page_diensten.js en b_overleg.js en
   is in ronde 9 hierheen verhuisd. Inline wint namelijk altijd, dus het
   breekpunt op 900 px dat deze twee kolommen onder elkaar zet deed niets: op
   een telefoon van 320 px bleven het twee kolommen van samen 341 px en stak
   de foto 94 px buiten de pagina.
   Hij staat hier, vlak bij .split waar hij dezelfde maten mee deelt, en niet
   verderop in het bestand: een regel NA het breekpunt zou dat breekpunt
   opnieuw overrulen, want de specificiteit is gelijk en dan wint de laatste. */
.split,.svc-top{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
/* Een kolom in een raster krimpt van zichzelf NOOIT onder de breedte van zijn
   eigen inhoud: de standaardwaarde is min-width:auto. Op een telefoon van
   320 px hield de tekstkolom daardoor 309 px vast terwijl er 277 beschikbaar
   was, en schoof de pagina 18 px opzij. min-width:0 geeft de kolom
   toestemming om wel mee te krimpen; de tekst breekt dan gewoon af. */
.split>*,.svc-top>*{min-width:0}
.split.wide{grid-template-columns:1fr 1fr}
.split.form{grid-template-columns:1.15fr .85fr}
/* ---------- sfeerbeeld-galerij (behang) ---------- */
.mood{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.mood>div{position:relative;overflow:hidden}
.mood .m-a{grid-column:span 6;aspect-ratio:4/3}
.mood .m-b{grid-column:span 3;aspect-ratio:3/4}
.mood .m-c{grid-column:span 3;aspect-ratio:3/4}
.mood .m-d{grid-column:span 4;aspect-ratio:1/1}
.mood .m-e{grid-column:span 8;aspect-ratio:16/9}
.usp{background:var(--parch);border-bottom:1px solid var(--line)}
.usp span{font-size:.84rem;font-weight:600;color:var(--green);display:flex;align-items:center;gap:8px}
.usp span:before{content:"✓";color:var(--gold-d);font-weight:700}
.usp .wrap{display:flex;gap:18px 30px;flex-wrap:wrap;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.grid.g4 .card-body h3{font-size:1rem}
.wrap.narrow{max-width:780px}
section+.usp,.usp+section{border-top:none}
.section-intro,.lead{max-width:68ch}
@media(min-width:900px){
 section{padding:84px 0}
 section.tight{padding:56px 0}
 .section-intro{font-size:1.05rem;line-height:1.75}
 .grid{gap:28px}
}
@media(max-width:900px){
 .hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:52px;padding-bottom:52px}
 .g3,.g4{grid-template-columns:repeat(2,1fr)}
 .split,.split.wide,.split.form,.svc-top{grid-template-columns:1fr;gap:30px}
 .svc-top{grid-template-columns:1fr;gap:28px}
}
@media(max-width:760px){
 /* De vakjes moeten hier met dezelfde selectorkracht worden aangesproken als
    hierboven (ronde 9-controle). .mood>div telt als een klasse plus een
    element en verliest van .mood .m-b, dat twee klassen heeft; dat gold ook
    BINNEN dit breekpunt, want specificiteit gaat voor. Op een telefoon van
    320 px bleven de vakjes daardoor 60 px breed, waarvan 32 px opging aan
    binnenmarge, en paste er geen woord meer in. */
 .mood .m-a,.mood .m-b,.mood .m-c,.mood .m-d,.mood .m-e{grid-column:span 6;aspect-ratio:4/3}
 .usp span{font-size:.8rem}
}
@media(max-width:560px){
 .g2,.g3,.g4{grid-template-columns:1fr}
 .hero .wrap{padding-top:38px;padding-bottom:38px}
 section{padding:44px 0}
 /* Smallere bladspiegel op een telefoon (ronde 9). Van 24 naar 14 pixels
    links en rechts wint 20 pixels, en die had de kopbalk nodig: op een
    scherm van 320 px vroeg hij 365 px en kreeg de hele site daardoor een
    horizontale schuifbalk.
    LET OP WAAR DEZE REGEL STAAT. Hij moet NA de basisregel .wrap komen (die
    staat hierboven op regel 577), want beide hebben dezelfde specificiteit
    en dan wint de laatste. Stond hij eerder in het bestand, dan won de
    basisregel met zijn 24 pixels en gebeurde er niets. Dat is in deze CSS
    al twee keer misgegaan; zie ook .svc-top. */
 .wrap{padding:0 14px}
 /* VANGNET VOOR INLINE RASTERS (ronde 9).
    Twintig plekken in de bouwscripts zetten hun kolomindeling als inline
    stijl op het element zelf. Een inline stijl wint van élke gewone regel,
    dus die kolommen bleven ook op een telefoon naast elkaar staan: op
    afspraak.html duwde dat de pagina 152 px breder dan het scherm, op
    over-ons.html 48 px. Hier is !important de enige manier om er nog
    overheen te komen, en op een scherm van deze maat is één kolom altijd
    het juiste antwoord.
    Dit is een vangnet, geen vrijbrief: zet een nieuwe kolomindeling in
    style.css met een eigen klasse, niet inline. */
 [style*="grid-template-columns"]{grid-template-columns:1fr !important}
}

/* ══════ 6. KAARTEN EN BOUWSTENEN ══════ */
.card .ph{aspect-ratio:4/3}
.card h3{margin:0 0 .4rem;font-size:1.06rem}
.card p{font-size:.9rem;color:var(--tekst-sec);margin:0 0 .8rem}
.price{color:var(--gold-d);font-family:Cinzel,serif;font-weight:600;font-size:.92rem}
.more{color:var(--green);font-size:.85rem;font-weight:600;margin-top:auto}
.more:after{content:" →";color:var(--gold-d)}
/* ---------- fotoplaceholder ---------- */
/* De plaatshouder voor een foto die er nog niet is (opdracht 5, punt F-3).
   Er komen 113 foto's, en die komen niet allemaal tegelijk. Een pagina
   zonder foto moet er daarom rustig uitzien en niet alsof er iets kapot
   is: een licht vlak met een klein onderschrift, geen bouwterrein met
   streepjescode. Zodra er een echte foto staat, vervangt die dit blok. */
/* min-width:0 op de flex-items: .ph is een flexkolom en een flexitem krimpt van
   zichzelf niet onder zijn eigen inhoud. Zonder deze regel stak de
   plaatshoudertekst uit het kader zodra het vakje smal werd. De echte
   oorzaak zat in het stemmingsraster (zie .mood bij 760 px); dit is het
   vangnet voor elk ander krap vakje. */
.ph>*{min-width:0}
.ph{background:var(--parch);border:1px solid var(--line);
 display:flex;align-items:center;justify-content:center;text-align:center;
 color:var(--tekst-zwak);font-size:.72rem;letter-spacing:var(--sp-klein);
 padding:16px;font-weight:400;flex-direction:column;gap:6px}
.ph .ph-pad{font-family:ui-monospace,Consolas,monospace;font-size:.62rem;letter-spacing:0;text-transform:none;font-weight:400;opacity:.7}
.ph.tall{aspect-ratio:3/4}
.ph.wide{aspect-ratio:16/9}
/* ── voor en na met een schuif (opdracht 5, punt G-1) ──
   Zonder JavaScript staan de twee beelden naast elkaar, precies zoals de
   gewone voor-en-na. Zet app.js de klasse 'schuift' erop, dan liggen ze
   over elkaar en bepaalt de regelaar hoeveel van "voor" u ziet. */
.baschuif{margin:0}
.baschuif-beelden{display:grid;grid-template-columns:1fr 1fr;gap:3px;border:1px solid var(--line)}
.baschuif-beelden>div{position:relative}
.baschuif .ph{aspect-ratio:4/3;border:none}
.baschuif .lbl{position:absolute;top:10px;left:10px;background:var(--green);color:var(--parch);
 font-size:.66rem;padding:4px 9px;letter-spacing:var(--sp-kop)}
.baschuif-regelaar{display:none;width:100%;margin:10px 0 0}
.baschuif figcaption{margin-top:10px;font-size:.86rem;color:var(--tekst-sec);line-height:1.5}
.baschuif.schuift .baschuif-beelden{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.baschuif.schuift .baschuif-beelden>div{position:absolute;inset:0}
.baschuif.schuift .baschuif-voor{clip-path:inset(0 calc(100% - var(--schuif,50%)) 0 0)}
.baschuif.schuift .baschuif-voor .lbl{left:10px}
.baschuif.schuift .baschuif-na .lbl{left:auto;right:10px}
.baschuif.schuift .ph{height:100%;aspect-ratio:auto}
.baschuif.schuift .baschuif-regelaar{display:block}
/* de scheidslijn zit waar de schuif staat, zodat het oog hem volgt */
.baschuif.schuift .baschuif-beelden::after{content:"";position:absolute;top:0;bottom:0;
 left:var(--schuif,50%);width:2px;background:var(--gold);pointer-events:none}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:3px;border:1px solid var(--line)}
.beforeafter .ph{border:none;aspect-ratio:4/3}
.beforeafter span.lbl{position:absolute;top:10px;left:10px;background:var(--green);color:var(--parch);font-size:.66rem;padding:4px 9px;letter-spacing:.12em}
.ba-item{position:relative}
/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)}
.step{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.step:before{content:counter(s);font-family:Cinzel,serif;font-size:1.7rem;color:var(--gold-d);line-height:1}
.step h4,.step h3{margin:0 0 .25rem;font-size:1rem}
.step p{margin:0;font-size:.92rem;color:var(--tekst-sec)}
/* ============ GLASSOORTEN (glas.html, ronde 10) ============
   Zeventien glassoorten in vier groepen. Een definitielijst en geen kaarten:
   het gaat om lezen en vergelijken, en er zijn nog geen fotos van glas.
   De naam staat vet boven de uitleg, zodat u de lijst kunt scannen. */
.gl-groepen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:24px;margin-top:1.4rem}
.gl-groep{min-width:0}

/* ── GLASSOORTEN ALS UITKLAPRIJEN MET DOORSNEDE (glas.html) ──────────────
   Zeventien soorten stonden als drie kolommen lopende tekst onder elkaar:
   1.676 woorden, op een telefoon bijna negen schermen, zonder enig beeld.
   Nu is elke soort een regel met een getekende doorsnede, de naam en een
   samenvatting in een zin; de rest komt bij het openklappen.

   De tekeningen gebruiken twee eigen variabelen voor lijn en accent, zodat
   dezelfde tekening leesbaar blijft op wit, op perkament en op de
   donkergroene band. non-scaling-stroke houdt de omtreklijn even dik
   ongeacht hoe klein de tekening op een telefoon wordt.                   */
.gl-dsn{display:block;width:100%;height:auto;
 --gl-lijn:var(--green);--gl-acc:var(--gold-d);
 --gl-vul:color-mix(in srgb,var(--green) 9%,transparent);
 --gl-hou:color-mix(in srgb,var(--green) 40%,transparent)}
.band .gl-dsn,.alt .gl-dsn{--gl-vul:color-mix(in srgb,var(--green) 12%,transparent)}
.gl-blad{fill:var(--gl-vul);stroke:var(--gl-lijn);stroke-width:1.2;vector-effect:non-scaling-stroke}
.gl-glans{stroke:var(--gl-lijn);stroke-width:1;opacity:.4;vector-effect:non-scaling-stroke}
.gl-folie,.gl-coat,.gl-zilver{fill:var(--gl-acc)}
.gl-lak,.gl-gel{fill:var(--gl-lijn);opacity:.75}
.gl-hou{fill:var(--gl-hou)}
.gl-mat{fill:var(--gl-lijn);opacity:.5}
.gl-draad{stroke:var(--gl-acc);stroke-width:1.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}

.gl-groepkop{margin:1.8rem 0 .3rem;font-size:.82rem;color:var(--gold-d);
 letter-spacing:var(--sp-klein);text-transform:uppercase}
.gl-rijen{border-top:1px solid var(--line)}
.gl-soort{border-bottom:1px solid var(--line)}
/* de regel zelf: plusteken, tekening, tekst. De tekening krijgt een vaste
   kolom zodat alle doorsneden onder elkaar op dezelfde schaal staan en de
   dikteverschillen af te lezen zijn. */
.gl-soort>summary{cursor:pointer;list-style:none;display:grid;
 grid-template-columns:18px 108px 1fr;gap:0 16px;align-items:center;padding:11px 0}
.gl-soort>summary::-webkit-details-marker{display:none}
.gl-soort>summary:before{content:"+";color:var(--gold-d);font-weight:700;
 font-size:1.05rem;line-height:1;text-align:center}
.gl-soort[open]>summary:before{content:"\2013"}
.gl-soort>summary:hover .gl-naam{color:var(--gold-d)}
.gl-dsnvak{display:block;min-width:0}
.gl-tekst{display:block;min-width:0}
.gl-naam{font-family:Cinzel,Georgia,serif;font-weight:600;color:var(--green);
 font-size:1rem;display:block;line-height:1.3}
.gl-kort{display:block;color:var(--tekst-sec);font-size:.9rem;line-height:1.5;margin-top:2px}
.gl-uit{padding:0 0 14px calc(18px + 108px + 32px)}
.gl-uit p{margin:0 0 .6rem;max-width:70ch}
.gl-uit .gl-waar{color:var(--tekst-sec)}
/* de waarschuwing is een opmerking, geen tweede hoofdtekst: kleiner en
   grijzer dan de rest, met een gouden streep als enige nadruk */
.gl-let{border-left:2px solid var(--gold);padding-left:12px;font-size:.88rem;
 color:var(--tekst-sec);margin-bottom:0}
.gl-let b{color:var(--green)}
.gl-wijzer{font-size:.85rem;color:var(--tekst-zwak);margin:1rem 0 .4rem;max-width:72ch}
@media(max-width:560px){
 /* Op een telefoon blijft de tekening NAAST de tekst staan, maar smaller.
    Erboven zetten kostte 60 pixels per regel, en bij zeventien soorten is dat
    ruim duizend pixels extra. Zestig pixels is nog genoeg om een enkel blad
    van een drievoudig pakket te onderscheiden, en dat is waar de tekening
    voor bedoeld is. */
 .gl-soort>summary{grid-template-columns:16px 60px 1fr;gap:0 10px;padding:10px 0}
 .gl-uit{padding-left:26px}
 .gl-naam{font-size:.95rem}
 .gl-kort{font-size:.85rem}
}
.gl-groep h3{margin:0 0 10px;font-size:1rem;color:var(--gold-d);letter-spacing:var(--sp-klein);text-transform:uppercase}
.gl-lijst{margin:0;display:grid;gap:14px}
.gl-lijst dt{font-weight:600;color:var(--green);font-size:.95rem}
.gl-lijst dd{margin:2px 0 0;font-size:.88rem;line-height:1.6;display:grid;gap:4px;min-width:0}
.gl-waar{color:var(--tekst-sec)}
.gl-letop{font-size:.85rem;border-left:2px solid var(--gold);padding-left:10px;color:var(--tekst-sec)}
/* De twee wegen bovenaan verf.html: kijken of rekenen (ronde 10). Twee brede
   knoppen met een ondertitel, want de vraag "weet u al wat u nodig heeft"
   bepaalt welke kant iemand op moet. */
.verfweg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin:1.4rem 0 0}
.verfweg .btn{flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 20px;min-width:0}
.verfweg .btn b{font-size:.95rem}
.verfweg .btn span{font-size:.84rem;font-weight:400;opacity:.85}
/* ============ ASSORTIMENTSOVERZICHT (verfassortiment.html, ronde 10) ============
   Per klus een blok met de merken die erbij horen. Bewust GEEN kaartenraster
   met plaatjes: er zijn nog geen productfoto's, en een raster van lege vakjes
   oogt leger dan een goede lijst. Dit is een leesbare opsomming die op een
   telefoon net zo goed werkt als op een breed scherm. */
/* min() in de minmax: zonder dat eist de kolom altijd 320 pixels, ook op een
   telefoon waar er maar 292 beschikbaar zijn, en dan schuift de pagina 29
   pixels opzij (ronde 10-meting). Met min(320px,100%) krimpt de kolom mee. */
.as-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px;margin-top:1.4rem}
.as-klus{background:var(--white);border:1px solid var(--line);border-radius:var(--r-blok);padding:20px 22px;min-width:0}
.as-klus h3{margin:0 0 6px;font-size:1.05rem;color:var(--green)}
.as-kort{margin:0 0 10px;font-size:.92rem;color:var(--tekst-sec)}
.as-letop{margin:0 0 12px;font-size:.88rem;line-height:1.6}
.as-merken{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.as-merken li{font-size:.88rem;line-height:1.5;padding-left:14px;border-left:2px solid var(--gold);min-width:0}
.as-merken b{color:var(--green)}
/* het aantal komt uit de artikelenlijst; klein en rustig, want het is een
   hulpgetal en niet de boodschap */
.as-tel{font-size:.74rem;color:var(--tekst-zwak);background:var(--parch);border-radius:20px;padding:1px 8px;margin-left:4px}
.as-waarom{display:block;color:var(--tekst-sec)}
/* de schaplinks moeten kunnen afbreken: op 761 en 900 px staken twee links
   samen net buiten de kaart (ronde 10-meting) */
.as-schap{margin:0;font-size:.88rem;display:flex;flex-wrap:wrap;gap:4px 12px}
.as-schap .more{margin-right:0}
/* ---------- tabel ---------- */
/* Het schuifbare vak om elke tabel (ronde 9, gezet door rolTabellen in gen.js).
   Past de tabel binnen de bladspiegel, dan merkt niemand hier iets van; past
   hij niet, dan schuift de tabel binnen dit vak in plaats van de hele pagina
   scheef te trekken. De schaduwrand rechts laat zien dát er meer staat, want
   een schuifbalk die je niet ziet gebruik je ook niet.
   scrollbar-width:thin houdt die balk bescheiden op Firefox en Chromium. */
.tabelrol{overflow-x:auto;scrollbar-width:thin;max-width:100%}
.tabelrol:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
table.pr{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0 1.5rem}
table.pr th{background:var(--green);color:var(--parch);text-align:left;padding:11px 14px;font-weight:600;font-size:.82rem;letter-spacing:var(--sp-klein)}
table.pr td{padding:11px 14px;border-bottom:1px solid var(--line)}
table.pr tr:nth-child(even) td{background:var(--parch)}
/* Het bedrag zelf mag nooit afbreken: "circa € 1" op de ene regel en "10" op
   de volgende leest als een ander bedrag. */
table.pr td.num{font-family:Cinzel,serif;color:var(--gold-d);font-weight:600;white-space:nowrap}
/* De merknaam achter het bedrag staat op een EIGEN REGEL en mag wel afbreken
   (ronde 9). Stond hij achter het bedrag, dan gold de nowrap hierboven ook
   voor hem: de cel werd 272 pixels breed terwijl er 176 beschikbaar was, en
   de tekst liep dwars over de kolom ernaast. Nu telt alleen "circa € 110"
   mee voor de minimumbreedte en dat past ruim. */
table.pr td.num small{display:block;white-space:normal;font-weight:400;margin-top:2px;line-height:1.35}
/* ---------- reviews ---------- */
.rev{background:var(--white);border:1px solid var(--line);padding:22px 24px}
/* Beoordelingen komen uit hoogstens twee bronnen, elk met een eigen kop
   waarin staat waar het cijfer vandaan komt en waar het na te kijken is.
   Zonder die bronvermelding is een score niets waard. */
.revbron+.revbron{margin-top:2rem}
.revkop{font-size:.92rem;color:var(--tekst-sec);margin:0 0 1rem}
.revkop b{font-size:1.15rem;color:var(--green);margin-right:4px}
.revkop a{color:var(--gold-d)}
.stars{color:var(--gold-d);letter-spacing:2px;font-size:.9rem}
.rev p{font-size:.93rem;font-style:italic;color:#3d3d3d;margin:.7rem 0}
.rev cite{font-style:normal;font-size:.82rem;color:var(--tekst-zwak);font-weight:600}
/* ---------- breadcrumb ---------- */
.crumb{font-size:.78rem;color:var(--tekst-zwak);padding:16px 0 0}
/* Een kruimelpadlink was 15 px hoog en daarmee lastig te raken op een
   telefoon (ronde 9-controle). Met wat lucht erboven en eronder wordt het
   raakvlak 25 px, boven de 24 px die de toegankelijkheidsrichtlijn vraagt,
   zonder dat de regel er anders uitziet: inline-block met verticale padding
   duwt de regelhoogte niet uit elkaar. */
.crumb a{text-decoration:none;display:inline-block;padding:5px 0}
.crumb span{color:var(--gold-d)}
.tag{display:inline-block;background:var(--parch);border:1px solid var(--line);padding:4px 11px;font-size:.75rem;color:var(--green);margin:0 6px 6px 0;border-radius:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--gold);font-weight:700;margin-right:10px}
.faq details[open] summary:before{content:"–"}
/* ---------- specificatietabel klein ---------- */
table.spec{width:100%;border-collapse:collapse;font-size:.88rem}
table.spec td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.spec td:first-child{color:var(--tekst-zwak);width:42%}
table.spec td:last-child{font-weight:600;color:var(--green)}
.pill{display:inline-block;background:var(--green);color:var(--parch);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;margin-bottom:10px;font-weight:600}
.pill.gold{background:var(--gold);color:var(--green-d)}
.spectip{border-bottom:1px dotted var(--gold-d);cursor:help}
.card-body{padding:20px 22px 24px;gap:0}
table.spec tr:last-child td{border-bottom:none}
table.pr td:first-child{white-space:normal}
.faq details:last-child{border-bottom:none}
.iconkop{display:flex;align-items:center;gap:12px}
.iconkop .ic{color:var(--gold-d)}
.card .iconkop .ic,.kk-kaart .ic{color:var(--gold-d)}
/* ============ BEWEGING, subtiel en huisstijl-vast ============ */
.onthul{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.onthuld{opacity:1;transform:none}
/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .2s ease,transform .25s ease,box-shadow .25s ease}
.card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 16px 34px rgba(26,54,38,.12)}
/* prijs en vervolg-link op kaarten netjes onder elkaar */
.card-body .price{display:block}
.card-body .price::first-letter{text-transform:uppercase}
.card-body .more{display:inline-block;margin-top:10px}
.notice{background:#fdf6e3;border:1px solid var(--gold);border-left-width:4px;padding:16px 20px;font-size:.9rem;margin:1.4rem 0;border-radius:var(--rk)}
/* ============ VERFIJNING: FAQ, TABELLEN, KAARTKOPPEN ============ */
/* faq: ruimere klikvlakken, duidelijke plus die meedraait in kleur */
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--green);font-family:Cinzel,serif;font-size:1rem;list-style:none;min-height:48px;display:flex;align-items:center;padding:6px 0;gap:2px}
.faq summary:hover{color:var(--gold-d)}
.faq summary:hover:before{color:var(--gold-d)}
.faq details[open] summary{color:var(--gold-d)}
.faq p{margin:.7rem 0 0;font-size:.93rem;color:var(--tekst-sec);padding-left:24px;max-width:66ch}
/* tabellen: rijmarkering en scrollbaar op smalle schermen */
table.pr tbody tr:hover td{background:#efe9da}
/* kaartkoppen met icoon */
.card .iconkop{display:flex;align-items:flex-start;gap:10px}
.card .iconkop .ic{width:22px;height:22px;flex:0 0 auto;margin-top:2px;color:var(--gold-d)}
/* zichtbare focus ook op de kaarten en knoppen die alleen :hover hadden */
.card:focus-within{border-color:var(--gold)}
/* ============ TEAM, ronde portretten zoals op de huidige site ============ */
.teamgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 34px;margin-top:2rem}
.teamlid h3{margin:.8rem 0 0;font-size:1rem}
.ph.teamfoto{border-radius:50%;aspect-ratio:1/1;width:130px;margin:0 auto;
 border:2px solid rgba(197,160,89,.5);font-size:.8rem;letter-spacing:var(--sp-klein)}
/* ── schakelkast (_bouw/onderdelen.js): weergave van 'binnenkort' ─────────
   .bk        klein label achter een link of kop; erft de tekstkleur zodat het
              op donker (menu, voettekst) én licht (pagina's) leesbaar blijft
   .bk-melding balk bovenaan een binnenkort-pagina                          */
.bk{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:var(--r-rond);padding:1px 7px 2px;vertical-align:2px;opacity:.78;margin-left:4px}
.bk-melding{margin:18px 0 0}
/* sprongnavigatie bovenaan lange dienstpagina's ("Op deze pagina: ...") */
.sprong{margin-top:1.2rem;font-size:.88rem;color:#555}
.sprong a{display:inline-block;padding:2px 0;margin:0 2px}
details[open]>.wg-klus-samenvatting:before{transform:rotate(90deg)}
.teamfunctie{font-size:.82rem;color:var(--tekst-zwak);margin:4px 0 0}
/* De oude regel table.pr{display:block;overflow-x:auto} stond hier onder
   max-width:760px en is in ronde 9 vervallen. Hij loste het probleem op waar
   het niet zat: juist TUSSEN 760 en ongeveer 1000 pixels staken vijf tabellen
   buiten de bladspiegel. Het schuifbare vak .tabelrol hierboven geldt nu op
   elke breedte, dus dit breekpunt heeft niets meer te doen. */
@media(max-width:560px){
 .beforeafter{grid-template-columns:1fr}
 .step{grid-template-columns:44px 1fr;gap:14px}
}

/* ══════ 7. REKENHULPEN EN CONFIGURATORS ══════ */
.calc h3{margin-top:0}
/* ---------- shop ---------- */
.shopbar{display:flex;gap:14px;flex-wrap:wrap;align-items:end;background:var(--parch);border:1px solid var(--line);padding:18px 20px;margin-bottom:26px}
.shopbar > div{flex:1 1 170px}
.prod{border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column}
.prod .ph{aspect-ratio:1/1}
.prod .pb{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:.95rem;margin:0 0 4px}
.prod .cat{font-size:.74rem;color:var(--gold-d);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.prod .pr2{font-family:Cinzel,serif;font-size:1.15rem;color:var(--green);font-weight:600;margin:auto 0 12px}
.prod button{width:100%}
.stock{font-size:.75rem;color:#3d7a4f;font-weight:600}
.stock.no{color:var(--gold-d)}
.cartbar.show{display:flex}
.cartbar b{font-family:Cinzel,serif;color:var(--gold)}
/* ============ PRODUCTPAGINA ============ */
.prodpage{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.btwtoggle{display:inline-flex;border:1px solid var(--line);background:var(--white);margin-bottom:14px;overflow:hidden}
.btwtoggle button{border:none;background:var(--white);padding:9px 16px;font-size:.82rem;cursor:pointer;color:var(--tekst-sec);min-height:44px;font-family:inherit}
.btwtoggle button[aria-pressed=true]{background:var(--green);color:var(--parch);font-weight:600}
.xs h4{margin:0 0 8px;font-size:.92rem;font-family:Cinzel,serif;color:var(--green)}
.xs ul{list-style:none;padding:0;margin:0 0 12px;font-size:.8rem;color:var(--tekst-sec)}
.xs ul li{padding-left:18px;position:relative;margin-bottom:4px}
.xs ul li:before{content:"✓";position:absolute;left:0;color:var(--gold-d);font-weight:700}
.xs .p{font-family:Cinzel,serif;font-weight:600;color:var(--green);margin:auto 0 10px;font-size:1.05rem}
.xs button{width:100%;font-size:.85rem;padding:11px 14px}
.kleur{border:1px solid var(--line);background:var(--white);padding:0;cursor:pointer;text-align:left;font-family:inherit;min-height:auto}
.kleur:hover{border-color:var(--gold)}
.kleur[aria-pressed=true]{border:2px solid var(--green);box-shadow:0 0 0 2px var(--gold)}
.kleur .nm span{color:var(--tekst-zwak)}
.gekozen .sw{width:52px;height:52px;border:1px solid rgba(0,0,0,.18);flex:0 0 auto}
.volumes{display:grid;gap:10px}
.volumes label{display:flex;gap:12px;align-items:center;border:1px solid var(--line);padding:13px 16px;cursor:pointer;font-weight:400;background:var(--white);margin:0}
.volumes label:hover{border-color:var(--gold)}
.volumes input:checked+span{font-weight:600}
.volumes label:has(input:checked){border-color:var(--green);background:var(--parch);box-shadow:inset 3px 0 0 var(--gold)}
.volumes .m2{margin-left:auto;font-size:.82rem;color:var(--tekst-zwak);text-align:right}
.calc-kop{margin-top:0}
.calc-lead{font-size:.92rem;color:var(--tekst-sec);margin:0 0 18px}
.calc .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:0;align-items:end}
/* een gridkolom mag krimpen: zonder min-width:0 duwt een keuzemenu met een
   lange optie ("Plisséhordeur, ook schuifpui") over de buurvelden heen
   (opdracht 3, punt 9-1) */
.calc .row>div,.filterbar>div{min-width:0}
.calc .row select,.filterbar select{width:100%;max-width:100%}
.calc .row>div{min-width:0}
.calc label{min-height:34px;display:flex;align-items:flex-end;margin-bottom:6px}
/* ============ STAPPEN, WAAIERS EN SAMENVATTINGSBALK ============ */
.stap{border:1px solid var(--line);background:var(--white);margin-bottom:16px}
.stap>.kop{display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--parch);border-bottom:1px solid var(--line)}
.stap>.kop .nr{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--green);color:var(--parch);display:flex;align-items:center;justify-content:center;font-family:Cinzel,serif;font-size:.95rem;font-weight:600}
.stap>.kop h3{margin:0;font-size:1.02rem;flex:1}
.stap>.kop .gekozenlbl{font-size:.85rem;color:var(--gold-d);font-weight:600;text-align:right}
.stap.klaar>.kop .nr{background:var(--gold);color:var(--green-d)}
.stap>.body{padding:22px}
.waaiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.waaier{border:1px solid var(--line);background:var(--white);text-align:left;cursor:pointer;font-family:inherit;padding:0;display:flex;flex-direction:column;min-height:auto}
.waaier:hover{border-color:var(--gold)}
.waaier[aria-pressed=true]{border:2px solid var(--green);box-shadow:0 0 0 2px var(--gold)}
.waaier .strip{display:flex;height:56px}
.waaier .strip span{flex:1}
.waaier .wb{padding:14px 16px 16px}
.waaier .wb b{display:block;font-family:Cinzel,serif;color:var(--green);font-size:1rem;margin-bottom:2px}
.waaier .wb .aantal{font-size:.76rem;color:var(--gold-d);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.waaier .wb p{font-size:.83rem;color:var(--tekst-sec);margin:8px 0 0;line-height:1.55}
.filterbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end;margin-bottom:18px}
/* kleurkiezer */
.kleurgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.kleur .sw{height:64px;display:block;border-bottom:1px solid rgba(0,0,0,.12)}
.kleur .nm{display:block;padding:7px 9px 9px;font-size:.72rem;line-height:1.3}
.kleur .nm b{display:block;color:var(--green);font-size:.76rem;line-height:1.25}
.samenvatting{position:sticky;bottom:0;background:var(--green);color:var(--parch);border-top:2px solid var(--gold);z-index:70;box-shadow:0 -4px 20px rgba(0,0,0,.18)}
.samenvatting .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.samenvatting .info{flex:1;min-width:220px;font-size:.86rem;color:#d8d3c4;line-height:1.5}
.samenvatting .info b{color:var(--parch);display:block;font-size:.95rem}
.samenvatting .prijs{font-family:Cinzel,serif;font-size:1.6rem;color:var(--gold);white-space:nowrap}
.samenvatting .prijs small{display:block;font-family:Montserrat,sans-serif;font-size:.7rem;color:#b6c0b8;letter-spacing:var(--sp-klein)}
.kaartkeuze{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.kk-kaart{border:1px solid var(--line);background:var(--white);text-align:left;cursor:pointer;font-family:inherit;padding:16px 18px;display:flex;flex-direction:column;min-height:auto}
.kk-kaart:hover{border-color:var(--gold)}
.kk-kaart[aria-pressed=true]{border:2px solid var(--green);box-shadow:0 0 0 2px var(--gold)}
.kk-kaart b{font-family:Cinzel,serif;color:var(--green);font-size:.98rem;display:block;margin-bottom:3px}
.kk-kaart .merklbl{font-size:.72rem;color:var(--gold-d);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.kk-kaart p{font-size:.82rem;color:var(--tekst-sec);margin:0 0 10px;line-height:1.5}
.kk-kaart .vanaf{margin-top:auto;font-family:Cinzel,serif;color:var(--green);font-weight:600;font-size:1rem}
/* ---------- uitlijning en rust: laatste correcties ---------- */
.prodpage .sticky{position:sticky;top:96px}
.prodpage>div>.btwtoggle{margin-bottom:18px}
.stap:last-child{margin-bottom:0}
.stap .filterbar{margin-bottom:16px}
.stap .filterbar:last-child{margin-bottom:0}
.stap .body>p:last-child,.stap .body>div:last-child{margin-bottom:0}
.gekozen{display:flex;align-items:flex-start;gap:14px;background:var(--parch);border:1px solid var(--line);padding:14px 16px;margin:14px 0}
.gekozen>div:last-child{line-height:1.5}
.xs{border:1px solid var(--line);background:var(--white);padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
/* cross-sell strook */
.xsell{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;align-items:stretch}
.samenvatting+section{padding-top:52px}
/* zwevende balk onderin (shop en rekenhulpen) */
.cartbar .doelkeuze{max-width:220px;font-size:.82rem;padding:8px 10px;border:1px solid rgba(244,241,234,.4);
 background:var(--green-d);color:var(--parch);border-radius:var(--r-blok)}
/* ---------- calculator ---------- */
/* ---------- rekenhulpen: rustiger en beter uitgelijnd ---------- */
/* ============ VERFIJNING PANELEN ============ */
/* zwevende en losse panelen zacht gerond; kaders en kaarten blijven strak (klassiek) */
.calc{background:var(--parch);border:1px solid var(--line);border-left:4px solid var(--gold);padding:26px 28px;border-radius:12px}
/* left en max-width erbij in ronde 9: de balk stond alleen met right:22px
   vast en werd zo breed als zijn inhoud. Op een telefoon van 320 px viel hij
   daardoor 21 px links en 3 px rechts buiten beeld, met het bedrag en de knop
   half onzichtbaar. Nu kan hij nooit breder worden dan het scherm en mag hij
   binnen zijn eigen kader afbreken. */
.cartbar{position:fixed;right:22px;left:22px;bottom:22px;max-width:max-content;margin-left:auto;
 background:var(--green);color:var(--parch);padding:14px 22px;border:1px solid var(--gold);z-index:60;display:none;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;box-shadow:0 6px 26px rgba(0,0,0,.25);border-radius:14px}
.samenvatting .btn{box-shadow:none}
/* ── winkelcategoriepagina's: filterbalk en artikelregels (blok 7) ──────── */
.artfilter{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;margin:1.4rem 0 1rem}
.artlijst{border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
/* COMPACTERE ARTIKELREGEL (ronde 10). De regels waren 71 pixels hoog en er
   pasten er tien op een scherm; voor 43 artikelen betekende dat tien schermen
   scrollen. In een winkel zonder prijzen komt de bezoeker maar voor een ding:
   ligt het er, en in welke maat. Daar hoort een dichte lijst bij, geen kaart
   per artikel. Padding van 10 naar 6 en een vaste regelhoogte brengen de regel
   op ongeveer 44 pixels, bijna twee keer zoveel artikelen per scherm. */
.artrij{display:flex;justify-content:space-between;gap:4px 14px;align-items:center;padding:6px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;line-height:1.45}
.artrij:last-child{border-bottom:none}
/* flex-basis van 320 naar 260: op een telefoon van 320 px eiste het tekstvak
   meer ruimte dan er was en stak de artikelnaam er 8 tot 10 pixels buiten
   (ronde 10-meting). */
.artrij-tekst{flex:1 1 260px;min-width:0}
/* Het maatveld mag WEL afbreken (ronde 9). Het stond op white-space:nowrap
   omdat er meestal iets als "2,5 L" in staat, maar 42 van de 984 artikelen
   hebben er een hele zin in staan, tot 73 tekens ("staalbord met plankdecor;
   maatvoering op het label niet volledig leesbaar"). Die zin liep onder
   700 px dwars over de prijs en de bestelknop heen.
   De maten zelf blijven heel: b_artikelen.js zet een vaste spatie tussen het
   getal en de eenheid, zodat "2,5 L" nooit over twee regels valt. */
.artrij-maat{color:var(--tekst-zwak);font-size:.85rem;margin-left:6px}
.artrij-actie{display:flex;gap:12px;align-items:center;margin-left:auto}
.artrij-prijs{font-weight:600;white-space:nowrap}
.artrij-balie{font-weight:400;color:var(--tekst-zwak);font-size:.85rem}
.artrij-actie button{background:transparent;border:1.5px solid var(--gold-d);color:var(--gold-d);border-radius:var(--rk);padding:7px 14px;font:inherit;font-size:.8rem;font-weight:600;min-height:44px;cursor:pointer;white-space:nowrap}
.artrij-actie button:hover{background:var(--gold-d);color:var(--white)}
.artzoek-uit .artrij-cat{font-size:.72rem;letter-spacing:var(--sp-klein);text-transform:uppercase;color:var(--gold-d);display:block}
/* -- gegroepeerde categoriepagina's (opdracht 3, blok 7) -- */
.artlijsten .artgroep{border:1px solid var(--line);border-radius:var(--r);background:var(--white);margin:0 0 22px;padding:0}
/* De groepskop was een blok van 60 pixels met een eigen achtergrond en een
   knop erin. Boven een groep van twee artikelen woog die kop zwaarder dan de
   inhoud (ronde 10). Nu een rustige regel met een gouden streep eronder: nog
   steeds duidelijk een kop, maar hij eist de aandacht niet meer op. */
/* de regel boven de lijst met de uitleg over prijzen en de verzamelknop */
.arthint{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;min-width:0;
 font-size:.88rem;color:var(--tekst-sec);background:var(--parch);border:1px solid var(--line);
 border-radius:var(--r-blok);padding:12px 16px;margin:0 0 8px;max-width:none}
.artgroep-kop{display:flex;gap:8px 16px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;padding:14px 14px 6px;border-bottom:2px solid var(--gold);background:none}
.artgroep-kop h2{font-size:1rem;margin:0;font-family:inherit;letter-spacing:.01em}
.artgroep-tel{font-weight:400;color:var(--tekst-zwak);font-size:.85rem}
.artgroep-vraag{background:transparent;border:1.5px solid var(--gold-d);color:var(--gold-d);border-radius:var(--rk);padding:7px 14px;font:inherit;font-size:.8rem;font-weight:600;min-height:44px;cursor:pointer;white-space:nowrap}
.artgroep-vraag:hover{background:var(--gold-d);color:var(--white)}
/* Het aankruisvakje houdt zijn klikvlak van 44 pixels (dat is de eis voor
   raakvlakken), maar mag met negatieve marges over de regelpadding heen
   vallen (ronde 10). Zonder dit bepaalde het vakje de regelhoogte: 44 plus
   twee keer 6 padding is 56 pixels voor een regel met een naam erin. Het
   klikvlak blijft even groot, de lijst wordt een derde korter. */
.artvink{flex:0 0 auto;display:flex;align-items:center;margin:-7px 0}
.artvink input{width:18px;height:18px;margin:0;accent-color:var(--green)}
.artfoto{width:44px;height:44px;object-fit:cover;border-radius:4px;flex:0 0 auto;border:1px solid var(--line)}
/* De uitklap stond op een eigen regel ONDER de artikelnaam en maakte elke
   regel een tekstregel hoger (ronde 10). Hij hoort bij de naam, dus staat hij
   er nu achter. Alleen als iemand hem opent, neemt hij de ruimte die hij
   nodig heeft; dan wordt de details weer een blok. */
.artrij-meer{font-size:.82rem;display:inline;margin-left:10px}
.artrij-meer[open]{display:block;margin-left:0;margin-top:4px}
.artrij-meer summary{color:var(--tekst-zwak);cursor:pointer;display:inline;list-style:none}
.artrij-meer summary::-webkit-details-marker{display:none}
.artrij-meer summary:before{content:"+ ";font-weight:600}
.artrij-meer[open] summary:before{content:"– "}
.artrij-meer dl{margin:6px 0 2px;display:grid;grid-template-columns:auto 1fr;gap:2px 14px}
.artrij-meer dt{color:var(--tekst-zwak)}
.artrij-meer dd{margin:0}
/* toon-alles zonder JavaScript (punt 7-6): alle regels staan in de HTML,
   alleen CSS bepaalt wat er eerst zichtbaar is, Google ziet dus alles */
.af-alles{position:absolute;opacity:0;pointer-events:none}
.ingekort .art-verder{display:none}
#af-alles:checked~.artgroep .art-verder{display:flex}
.af-alles-knop{margin-top:4px;cursor:pointer}
.aa-dicht{display:none}
#af-alles:checked~.af-alles-knop .aa-open{display:none}
#af-alles:checked~.af-alles-knop .aa-dicht{display:inline}
/* een actief filter heft de vouw op, anders lijken treffers te ontbreken */
.artlijsten.zoekt .art-verder{display:flex}
/* Een groep waarvan ALLE regels onder de vouw vallen, gaat zelf ook weg:
   anders staat er een kop met een aantal erbij en niets eronder. */
/* De soort als klein label op de regel, voor de pagina's waar de koppen zijn
   vervallen omdat elke soort maar een of twee artikelen telde. */
.artrij-soort{font-size:.78rem;color:var(--tekst-sec)}
.artrij-soort::before{content:"\00b7";margin:0 5px 0 3px;opacity:.6}
.ingekort .artgroep-verder{display:none}
#af-alles:checked~.artgroep-verder{display:block}
.artlijsten.zoekt .artgroep-verder{display:block}
.artlijsten.zoekt .af-alles-knop{display:none}
@media(max-width:900px){
 .prodpage{grid-template-columns:1fr;gap:26px}
 .prodpage .sticky{position:static}
}
@media(max-width:760px){
 .artfilter{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 /* Op een telefoon krijgen de verzamelknop en de artikelnaam de volle breedte,
    en mag een lange artikelnaam middenin een woord afbreken (ronde 10-meting
    op 320 px). Dit blok staat NA de basisregels hierboven; stond het eerder in
    het bestand, dan won .artrij-tekst met zijn flex-basis van 260 pixels en
    gebeurde er niets. Zie ook de spelregels bovenin dit bestand. */
 .arthint{flex-direction:column;align-items:stretch}
 .arthint .artgroep-vraag{width:100%}
 /* 100 procent paste niet naast het vinkje, dus kreeg de tekst een eigen
     regel en het vinkje een lege regel van 44 pixels erboven. Met auto staan
     zij naast elkaar en breekt de tekst binnen zijn eigen vak. */
 .artrij-tekst{flex:1 1 0;min-width:0;overflow-wrap:anywhere;word-break:break-word}
 .artrij-tekst>*{overflow-wrap:anywhere;word-break:break-word}
 /* De uitklap "specificaties" staat op een breed scherm achter de naam, maar
    op een telefoon past dat net niet: bij een lange artikelnaam stak hij 7 tot
    10 pixels buiten de regel. Hier krijgt hij een eigen regel. */
 .artrij-meer{display:inline-block;margin-left:0;margin-top:2px}

 .calc{padding:20px}
 .samenvatting .wrap{gap:10px}
 .samenvatting .prijs{font-size:1.3rem}
 .samenvatting .btn{width:100%}
}

/* ══════ 8. WINKELWAGEN EN VENSTERS ══════ */
.ot-overlay{position:fixed;inset:0;background:rgba(18,36,26,.72);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}
.ot-kaart{background:var(--white);max-width:460px;width:100%;padding:32px 34px;border-top:5px solid var(--gold);max-height:88vh;overflow:auto}
.ot-kaart h3{margin:0 0 16px;font-size:1.25rem}
/* de wagenpagina zelf */
.wg-project{border:1px solid var(--line);margin:0 0 30px;background:var(--white)}
.wg-project>header{background:var(--green);color:var(--parch);padding:14px 20px;
 display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wg-project>header h2{color:var(--parch);font-size:1.1rem;margin:0;flex:1 1 auto}
.wg-kamer{border-top:1px solid var(--line)}
.wg-kamer>header{background:var(--parch);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wg-kamer>header h3{font-size:.95rem;margin:0;flex:1 1 auto}
.wg-item{display:grid;grid-template-columns:1fr auto auto auto;gap:10px 18px;align-items:center;
 padding:12px 20px;border-top:1px solid var(--line);font-size:.92rem}
.wg-item .oms{color:var(--tekst-zwak);font-size:.82rem;display:block}
.wg-item .pr{font-family:Cinzel,serif;color:var(--gold-d);font-weight:600;white-space:nowrap}
.wg-leeg{padding:14px 20px;color:var(--tekst-zwak);font-size:.88rem;font-style:italic}
.wg-aantal{display:inline-flex;align-items:center;gap:6px}
.wg-aantal b{min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.wg-verplaats{font-size:.82rem;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-blok);
 background:var(--white);color:var(--char);max-width:200px}
.wg-totaal{display:flex;justify-content:flex-end;gap:26px;padding:14px 20px;background:var(--parch);
 border-top:1px solid var(--line);font-size:.95rem}
/* "prijs aan de balie" staat waar anders een bedrag zou staan: dezelfde
   plek, maar rustiger, want het is een mededeling en geen getal. */
.wg-balie{font-weight:400;color:var(--tekst-sec);font-size:.85rem}
.wg-totaal b{font-family:Cinzel,serif;color:var(--green)}
.wg-acties{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 30px}
.wg-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px}
.wg-form .veld-breed{grid-column:1/-1}
/* ── winkelwagen als klussenlijst (blok 13) ─────────────────────────────── */
/* korte bevestiging onderin beeld na het toevoegen.
   De bevestiging en de zwevende winkelwagenbalk stonden allebei op
   bottom:22px en wisten niets van elkaar (ronde 9). Omdat de bevestiging
   juist verschijnt op het moment dat er iets in de wagen komt, legde hij
   zich bijna zes seconden lang bovenop het bedrag en de knop "Winkelwagen
   bekijken": gemeten 380 bij 74 pixels overlap. Nu wijkt hij omhoog zodra
   die balk in beeld is. De hoogte van de balk is ongeveer 74 px, plus lucht.
   :has() wordt door alle browsers ondersteund die deze site bedient; kan een
   oudere browser het niet, dan staat de bevestiging waar hij eerst stond en
   is er niets kapot. */
body:has(.cartbar.show) .wg-toast{bottom:calc(22px + 96px)}
.wg-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;
  background:var(--green-d);color:var(--parch);border:1px solid rgba(197,160,89,.5);
  border-radius:var(--rk);padding:12px 18px;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.3);
  display:flex;gap:10px;align-items:center;max-width:min(92vw,560px)}
.wg-toast a{color:var(--gold)}
.wg-toast.weg{opacity:0;transition:opacity .5s}
.wg-toast-x{background:none;border:none;color:var(--parch);font-size:1.1rem;cursor:pointer;padding:2px 10px;min-width:44px;min-height:44px}
/* keuzevenster: hergebruikt .ot-overlay/.ot-kaart; alleen de velden erin */
#wg-venster .ot-kaart label{margin-top:10px}
#wg-venster .ot-kaart select,#wg-venster .ot-kaart input{width:100%}
/* klussen op de wagenpagina zijn inklapbaar met subtotaal in de kopregel */
.wg-klus-samenvatting{display:flex;gap:14px;align-items:center;flex-wrap:wrap;cursor:pointer;list-style:none;padding:12px 16px;background:var(--green);color:var(--parch);border-radius:var(--r)}
.wg-klus-samenvatting::-webkit-details-marker{display:none}
.wg-klus-samenvatting h2{margin:0;font-size:1.05rem;color:var(--parch)}
.wg-klus-samenvatting .sub2{margin-left:auto;color:var(--gold);font-weight:600;white-space:nowrap}
.wg-klus-samenvatting:before{content:"▸";color:var(--gold);transition:transform .15s}
.wg-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px;align-items:center;font-size:.82rem;color:var(--tekst-zwak)}
/* afwerkingskeuzes per klus bij het afronden (opdracht 3, punt 8-2) */
.wg-afwerk{margin:14px 0 4px;padding:12px 14px;background:var(--parch);border:1px solid var(--line);border-radius:var(--r-blok);font-size:.88rem}
.wg-afwerk label{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:8px 0 0;cursor:pointer}
.wg-afwerk input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--green)}
.wg-afwerk .oms{color:var(--tekst-zwak)}
.wg-chips button{background:transparent;border:1px solid var(--line);border-radius:var(--r-rond);padding:5px 14px;font:inherit;font-size:.8rem;cursor:pointer;min-height:44px}
.wg-chips button:hover{border-color:var(--gold-d);color:var(--gold-d)}
.wg-nognodig{background:#fdf6e3;border:1px solid var(--gold);border-left-width:4px;border-radius:var(--r);padding:10px 16px;font-size:.86rem;margin:10px 0}
.wg-nognodig ul{margin:6px 0 0;padding-left:18px}
@media(max-width:760px){
 .wg-item{grid-template-columns:1fr auto}
 .wg-item .pr{grid-column:2;grid-row:1}
 .wg-form{grid-template-columns:1fr}
}

/* ══════ 9. VOETTEKST EN OPENINGSTIJDEN ══════ */
/* ---------- footer ---------- */
footer.site{background:var(--green-d);color:#b9c3bb;padding:52px 0 26px;font-size:.88rem}
footer.site a:hover{color:var(--gold)}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
/* ============ VOETTEKST, HERSTELD ============ */
footer.site a{color:#dcd6c8;text-decoration:none;display:block;padding:5px 0;min-height:auto}
footer.site .fgrid a{line-height:1.5}
.oturen{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;font-size:.84rem;color:#b9c3bb;margin:0 0 14px}
.oturen span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums}
.oturen .afw{grid-column:1/-1;color:var(--gold);font-size:.8rem;margin-top:8px;text-align:left}
footer.site h4,footer.site .fkop{color:var(--gold);font-size:.8rem;letter-spacing:var(--sp-kop);text-transform:uppercase;margin:0 0 14px;margin-bottom:12px}
.fbot{border-top:1px solid rgba(197,160,89,.25);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:#a8b3ac;align-items:center}
.fbot a{display:inline;padding:0}
/* ============ VOETTEKST, RUSTIGER ============ */
.fmerk{font-family:Cinzel,serif;font-size:1.25rem;letter-spacing:var(--sp-kop);color:var(--parch);text-transform:uppercase}
.fcontact{display:flex;align-items:center;color:#dcd6c8;font-size:.9rem;padding:6px 0;text-decoration:none;min-height:44px}
.fcontact .ic{width:18px;height:18px;color:var(--gold);flex:0 0 18px;margin-right:12px}
.social{display:flex;gap:10px;margin-top:20px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;color:#b9c3bb;transition:none}
.social a:hover{background:transparent;color:var(--gold);border-color:var(--gold);border:none}
.social .ic{width:21px;height:21px}
.social a,.wagenknop,nav.main a{transition:color .18s ease,background .18s ease,border-color .18s ease}
@media(max-width:900px){
 footer .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 footer .fgrid{grid-template-columns:1fr}
}

/* ══════ 10. OVERIG ══════ */
/* Vier gelijke kolommen (opdracht 6, punt C-14). Met min-width:130px werd
   elk blok zo breed als zijn eigen tekst, en dat maakte het vierde blok
   met het langste bijschrift veel breder dan de andere drie. */
.trust{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;text-align:center}
.trust>div{flex:1 1 0;min-width:130px;max-width:220px}
.trust b{display:block;font-family:Cinzel,serif;font-size:2.1rem;color:var(--gold)}
/* alleen het bijschrift klein, niet elke span in het blok: het jaartal
   zat in een span binnen de <b> en werd zo teruggezet naar 0,8rem, waardoor
   de 57 half zo groot was als de andere getallen (punt C-12) */
.trust>div>span{display:block;font-size:.8rem;color:#dfd9c9;letter-spacing:var(--sp-klein)}
/* "sinds 1969" hoort erbij maar hoeft niet even hard te roepen (punt C-13) */
.trust>div>span small{display:block;font-size:.72rem;opacity:.75;letter-spacing:var(--sp-klein);margin-top:2px;text-transform:none}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.collectie{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.collectie a{text-decoration:none;color:inherit;border:1px solid var(--line);display:block}
.collectie a:hover{border-color:var(--gold)}
.collectie .ph{aspect-ratio:1/1}
.collectie .cb{padding:12px 14px 16px}
.collectie h4{margin:0 0 3px;font-size:.9rem;font-family:Cinzel,serif;color:var(--green)}
.collectie p{margin:0;font-size:.78rem;color:var(--tekst-zwak)}
.jump{display:flex;gap:6px;flex-wrap:wrap;background:var(--parch);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:0}
.jump a{font-size:.85rem;text-decoration:none;padding:8px 14px;border:1px solid var(--line);background:var(--white);color:var(--green);min-height:44px;display:inline-flex;align-items:center}
.jump a:hover{border-color:var(--gold);color:var(--gold-d)}
.meer{text-align:center;margin-top:18px}
.jump .wrap{gap:8px}
.zakelijk-only{display:none}
/* ---------- filtertegels (deuren, vloeren) ---------- */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}
.tegel{border:1px solid var(--line);background:var(--white);cursor:pointer;font-family:inherit;padding:0;text-align:center;min-height:auto;display:block}
.tegel:hover{border-color:var(--gold)}
.tegel[aria-pressed=true]{border:2px solid var(--green);box-shadow:0 0 0 2px var(--gold)}
.tegel .ph{aspect-ratio:3/4;border:none;font-size:.68rem}
.tegel span.t{display:block;padding:9px 6px;font-size:.83rem;font-family:Cinzel,serif;color:var(--green)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--white);padding:11px 16px;font-size:.84rem;cursor:pointer;font-family:inherit;color:var(--green);min-height:44px}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed=true]{background:var(--green);color:var(--parch);border-color:var(--green)}
.kleurstaal{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.kleurstaal .ks{border:1px solid var(--line);background:var(--white)}
.kleurstaal .ks .sw{height:52px;display:block}
.kleurstaal .ks span.n{display:block;padding:7px 8px;font-size:.72rem;color:var(--green);line-height:1.3}
/* ============ ICONEN ============ */
.ic{width:1.25em;height:1.25em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.ic.groot{width:2rem;height:2rem;stroke-width:1.4}
.ic.xl{width:2.6rem;height:2.6rem;stroke-width:1.25}
/* zakelijke onderdelen: alleen zichtbaar in de zakelijke modus */
.alleen-zakelijk{display:none}
/* ============ MOBIEL MENU, compact, met iconen en twee lagen ============ */
.mi{display:none}
/* leesbreedte: 55-70 tekens verbetert begrip (Dyson & Haselgrove 2001) */
main p:not(.lead):not(.section-intro):not(.hint):not(.calc-lead){max-width:70ch}
@media(max-width:1080px){
 /* iconen naast de labels: sneller scannen */
 .mi{display:inline-flex;width:22px;height:22px;margin-right:12px;color:var(--gold);flex:0 0 auto;align-items:center}
 .mi .ic{width:20px;height:20px}
}
@media(max-width:1080px){
 /* Onder 1080 px passen de drie kolommen van de bovenbalk niet meer naast
    elkaar en werd het adres afgekapt tot "Esstra...". Van de drie is het
    adres hier het minst nodig. Alleen de STRAAT wijkt nu; de plaatsnaam
    blijft staan, want dat is waar een bezoeker uit de buurt op let. Het
    volledige adres staat in de voettekst, op contact.html en in het
    bedrijfsprofiel voor Google. */
 .ot-straat{display:none}
 /* Het e-mailadres wijkt hier ook (ronde 9). De contactregel staat op
    white-space:nowrap en is met telefoon én e-mail 249 px breed; in de
    driekoloms-bovenbalk kan hij niet krimpen en duwde hij bij 600 px de hele
    pagina 42 px breder dan het scherm. Op een scherm van deze maat belt men
    eerder dan dat men een adres overtypt; het adres staat in de voettekst en
    op contact.html. */
 .tb-mail{display:none}
 /* De klok gaat hier ook weg (ronde 9). Het adres weghalen wint ongeveer
    148 px, en dat is niet genoeg: zelfs de kortste variant "Nu open tot
    18:00" is 118 px en de avondvariant "Gesloten, morgen open vanaf 08:00"
    240 px, terwijl de middenkolom in dit bereik tot enkele tientallen
    pixels krimpt. Afkappen tot "Gesloten, mor..." helpt niemand, dus tonen
    wij hem hier niet. Wie wil weten of de winkel open is, vindt dat in de
    voettekst en op contact.html, en onder 560 px komt de klok terug omdat
    de balk daar in EEN kolom valt en er weer ruimte is. */
 #nu-open{display:none}
}
@media(max-width:560px){
 .frow{grid-template-columns:1fr}
 /* de bovenbalk staat hier onder elkaar, dus de klok past weer */
 #nu-open{display:inline-flex}
}

/* ══════ 11. TOEGANKELIJKHEID EN BEWEGING ══════ */
@media(prefers-reduced-motion:reduce){
 *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
 .card:hover{transform:none}
 .onthul{opacity:1;transform:none;transition:none}
 .card,.btn,header.site,header.site .wrap{transition:none}
 .card:hover,.btn:hover{transform:none}
}

/* lijst met verwante pagina's onder een dienstpagina (opdracht 5, H-1/H-2) */
.verwantlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.verwantlijst li{margin:0}

/* knoppen om dezelfde kleur in ander licht te zien (opdracht 5, punt G-4) */
.lichtknoppen{display:flex;gap:6px;flex-wrap:wrap}
.lichtknoppen button{background:transparent;border:1.5px solid var(--line);color:var(--tekst-sec);
 border-radius:var(--rk);padding:7px 12px;font:inherit;font-size:.78rem;font-weight:600;
 cursor:pointer;min-height:44px}
.lichtknoppen button[aria-pressed=true]{border-color:var(--gold-d);color:var(--gold-d);background:var(--parch)}

/* merkenpagina: alle merken uitgeschreven (opdracht 5, punt H-3) */
.merkgroep{margin-top:2rem}
.merkgroep h3{margin:0 0 .8rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.merk-tel{font-family:Montserrat,'Montserrat-terugval',-apple-system,Segoe UI,sans-serif;
 font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-sec)}
.merklijst{list-style:none;margin:0;padding:0;display:grid;gap:12px;
 grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.merklijst li{border-left:2px solid var(--line);padding:2px 0 2px 12px}
.merk-rol{font-size:.88rem;color:var(--tekst-sec)}

/* Zodra de echte foto er is, vult hij de plaatshouderdoos (opdracht 5, blok F).
   De doos houdt zijn eigen vorm: een teamportret is rond met een gouden rand
   en dat moet zo blijven, dus de rand blijft staan en de foto neemt de
   ronding van de doos over in plaats van zijn eigen hoekje van 10 px. */
.ph.heeft-foto{padding:0;background:none;overflow:hidden}
.ph.heeft-foto:not(.teamfoto){border:0;border-radius:var(--rk)}
.ph.heeft-foto img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}

/* prijsklasse als er nog geen bedrag is (opdracht 5, punt I-2) */
.artrij-klasse{color:var(--gold-d);font-weight:700;letter-spacing:.04em;cursor:help}

/* ============ PRINTEN ============
   Klanten printen prijstabellen en rekenuitkomsten en nemen die mee naar
   de balie (opdracht 5, punt K-7). Wat op papier moet: de kop, de
   ingevulde waarden, de uitkomst en het adres van de pagina. Wat weg
   mag: menu, voettekst, knoppen, sfeerbeelden en alles wat alleen op
   een scherm werkt. Dat scheelt twee vellen papier per keer. */
@media print{
 /* alles wat alleen op een scherm iets doet */
 header.site,nav.main,.topbar,.voorwie,footer.site,.crumb,.sprong,.jump,
 .band,.wagenknop,.wg-toast,.cartbar,.baschuif-regelaar,.lichtknoppen,
 .btn,.knopklein,button,.artgroep-vraag,.artvink,.info,.infoballon,
 .ph:not(.heeft-foto),.notice,.usp,.rev{display:none !important}
 /* zwart op wit, geen achtergronden die de cartridge leegtrekken */
 body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
 section,.wrap,.narrow,.wide{padding:0 !important;margin:0 !important;max-width:none !important}
 .alt,.calc,.result,.samenvatting,.prijsbalk,.card{background:#fff !important;border:1px solid #999;
  box-shadow:none !important}
 h1{font-size:18pt;margin:0 0 8pt}
 h2{font-size:13pt;margin:12pt 0 4pt}
 h3{font-size:11pt;margin:8pt 0 3pt}
 /* de uitkomst is waar het om gaat: die krijgt lucht en blijft heel */
 .result,.samenvatting,.prijsbalk,table.pr{break-inside:avoid;page-break-inside:avoid;
  margin:8pt 0 !important;padding:8pt !important;width:100% !important}
 .result{display:block !important}                 /* ook als hij nog niet "show" heeft */
 table.pr{border-collapse:collapse}
 table.pr th,table.pr td{border:1px solid #999;padding:4pt 6pt}
 /* ingevulde velden blijven leesbaar: de waarde staat in het veld zelf */
 input,select,textarea{border:1px solid #999 !important;padding:2pt 4pt !important;
  background:#fff !important;color:#000 !important;font-size:10pt}
 /* waar dit vandaan komt, zodat de balie de pagina terug kan vinden */
 main:after{content:"Aolbert, Esstraat 55 Rijssen, (0548) 51 28 88 · " attr(data-url);
  display:block;margin-top:12pt;padding-top:6pt;border-top:1px solid #999;font-size:9pt}
 a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#444}
 a[href^="#"]:after,a[href^="tel"]:after,a[href^="mailto"]:after{content:""}
 img{max-width:100% !important}
}

/* ============ PLAATSHOUDERTEKST IN EEN LEEG VELD ============
   (opdracht 6, punten C-8 tot C-11)
   Er stond geen enkele ::placeholder-regel, dus gebruikte elke browser zijn
   eigen grijs. In Chrome is dat bijna net zo donker als echte tekst, en dan
   leest "800" in een breedteveld als een ingevulde waarde.

   Twee dragers, niet één: cursief én een eigen kleur. Cursief is hier het
   belangrijkst, want dat werkt ook voor iemand die kleurverschil slecht
   ziet (WCAG 1.4.1, kleur mag nooit de enige drager zijn).

   De kleur is #767065: 4,91:1 op wit, dus boven de eis van 4,5:1 voor
   gewone tekst. Het eerder voorgestelde #8a8578 haalde 3,68:1 en viel af.
   opacity:1 is nodig omdat Firefox er standaard 0,54 op zet, wat het
   contrast alsnog onderuit zou halen. */
input::placeholder,textarea::placeholder{color:#767065;opacity:1;font-style:italic}
/* in een veld dat de focus heeft mag hij wat terugtreden: daar typt iemand */
input:focus::placeholder,textarea:focus::placeholder{color:#8f897d}

/* blikken onder elkaar in de vergelijkingstabel (opdracht 6, D-1 en D-2) */
.bliklijst{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.bliklijst li{white-space:nowrap;line-height:1.5}
/* vaste kolombreedtes, anders krijgt de klusomschrijving te weinig ruimte
   en breekt "Woonkamer, 40 m² muur, 2 lagen" over drie regels (punt D-3) */
.pr-verf{table-layout:fixed}
.pr-verf th:nth-child(1),.pr-verf td:nth-child(1){width:34%}
.pr-verf th:nth-child(2),.pr-verf td:nth-child(2){width:18%}
.pr-verf th:nth-child(3),.pr-verf td:nth-child(3),
.pr-verf th:nth-child(4),.pr-verf td:nth-child(4){width:24%}
@media(max-width:760px){.pr-verf{table-layout:auto}}

/* voorbeeldvlak: dezelfde kleur in drie soorten licht (opdracht 6, punt D-7).
   Staat op de plek waar eerst de foto van de mengmachine stond, en laat
   zien wat de knoppen eronder doen voordat er een kleur gekozen is. */
.lichtdemo{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
 border:1px solid var(--line);border-radius:var(--r-blok);overflow:hidden}
.lichtdemo span{display:block;aspect-ratio:1/1.2}

/* ============ PLAAT OP MAAT: DE KANTEN A TOT D ============
   (opdracht 6, blok E1). Dezelfde opzet als bij de gordijnrails: een
   tekening die het misverstand voorkomt dat een formulier niet kan
   voorkomen. Klikken in de tekening is een SNELKOPPELING; de vinkjes
   ernaast zijn de echte bediening, want die werken met een toetsenbord
   en met een schermlezer. */
.plaatkiezer{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,1.2fr);
 gap:24px;align-items:start;background:var(--white);border:1px solid var(--line);
 border-radius:var(--r-blok);padding:16px 18px}
#pp-plaat-svg{width:100%;max-width:300px;height:auto}
.pk-kant{stroke:#2B2B2B;stroke-width:3;cursor:pointer}
.pk-kant:hover{stroke:var(--gold-d);stroke-width:5}
.pk-kant.aan{stroke:var(--gold-d);stroke-width:6}
.pk-hoek{fill:#fff;stroke:#9a9484;stroke-width:1.4;cursor:pointer}
.pk-hoek:hover{stroke:var(--gold-d)}
.pk-hoek.aan{fill:var(--gold-d);stroke:var(--gold-d)}
.pk-lbl{font-size:12px;font-weight:700;fill:var(--green)}
.pk-maat{font-size:10px;fill:#5f5f5f}
.kantveld{border:none;padding:0;margin:0 0 16px}
.kantveld legend{font-weight:700;font-size:.88rem;color:var(--green);padding:0;margin-bottom:2px}
.kantveld label{display:flex;gap:9px;align-items:center;font-weight:400;margin:0;min-height:44px}
.kantveld input[type=checkbox]{width:auto}
.kantmaat,.kanthint{color:var(--tekst-sec);font-size:.82rem}
@media(max-width:760px){.plaatkiezer{grid-template-columns:1fr}}

/* ============ TEKENING MEESTUREN ============ (opdracht 6, blok E2)
   Het echte <input type=file> is verborgen achter een label dat eruitziet
   als een knop: het standaardveld is in elke browser anders en past
   nergens bij. Het veld blijft wel bereikbaar met het toetsenbord, want
   het label hoort er via for/id bij. */
.uploadblok{border:1px dashed var(--line);border-radius:var(--r-blok);padding:16px 18px;background:var(--white)}
.uploadknop{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
 padding:0 18px;border:1.5px solid var(--green);border-radius:var(--rk);cursor:pointer;
 font-weight:600;font-size:.88rem;color:var(--green);background:transparent;margin:0}
.uploadknop:hover{background:var(--green);color:var(--parch)}
.uploadknop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.uploadknop:focus-within{outline:3px solid var(--green);outline-offset:2px}
.uploadlijst{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.uploadlijst li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 background:var(--parch);border-radius:var(--rk);padding:6px 10px;font-size:.88rem}
.ul-naam{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.ul-maat{color:var(--tekst-sec);font-size:.82rem}
.uploadlijst li .knopklein{margin-left:auto}
.uploadmelding{margin-top:12px}

/* ============ PER KAMER ============ (opdracht 6, blok F) */
.kamerblok{padding-top:34px;padding-bottom:34px}
.kamerblok h2{margin-top:0;scroll-margin-top:120px}
.kamerlinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
/* wat mensen vergeten: elk item met een knop om het op de lijst te zetten */
.vergeetlijst{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:12px}
.vergeetlijst li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-blok);
 padding:14px 16px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
/* flex:0 1 auto met min-width:0 in plaats van 0 0 auto (ronde 9): met
   flex-shrink 0 hield een lange naam als "Waterbestendige plint of
   aansluitprofiel" zijn volle breedte en stak hij op een telefoon 20 px
   buiten de regel, waarna de hele pagina horizontaal ging schuiven. Nu
   krimpt hij mee en breekt de tekst netjes af. */
.vergeetlijst li b{color:var(--green);flex:0 1 auto;min-width:0}
.vergeetlijst .lijstknop{margin-left:auto;flex:0 0 auto}
.lijstknop[disabled]{opacity:.75;cursor:default}

/* ============ KLEURENWAAIERS ============
   Overzicht van de waaiers die in de winkel liggen. Mobile-first: de
   kaarten staan onder elkaar en gaan pas naast elkaar staan als er ruimte
   is. Klanten kijken dit vaak in de winkel op hun telefoon. */
.wkfilters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
 gap:14px;background:var(--parch);border:1px solid var(--line);
 border-radius:var(--r-blok);padding:16px 18px;margin-top:1.2rem}
.wkfilters label{display:block;font-size:.82rem;font-weight:600;margin-bottom:4px}
.wkgroep{margin-top:2.2rem}
.wkgroep[hidden]{display:none}
.wkgroep-kop{margin:0 0 1rem;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
 border-bottom:1px solid var(--line);padding-bottom:8px}
.wk-tel{font-family:Montserrat,'Montserrat-terugval',-apple-system,Segoe UI,sans-serif;
 font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-sec)}
.wkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.wk{background:var(--white);border:1px solid var(--line);border-radius:var(--r-blok);
 padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.waaier[hidden]{display:none}
.wk-kop h3{margin:0;font-size:1.02rem}
.wk-merk{font-size:.8rem;color:var(--tekst-sec)}
.wk-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;
 letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-rond);white-space:nowrap}
/* de drie standen van het lenen; de tekst zegt het, de kleur is er alleen
   bij (WCAG 1.4.1: kleur mag nooit de enige drager zijn) */
.badge-te-leen{background:#e4f0e7;color:#1d5c33;border:1px solid #b8d8c3}
.badge-in-winkel{background:var(--parch);color:var(--tekst-sec);border:1px solid var(--line)}
.badge-vraag{background:#fdf3e0;color:#7a5a13;border:1px solid #e8d5a8}
.badge-cat{background:transparent;color:var(--tekst-sec);border:1px solid var(--line);font-weight:400}
.wk-oms{margin:0;font-size:.9rem;color:var(--tekst-sec);line-height:1.5}
.wk-actie{margin:auto 0 0;padding-top:6px}
.leenstappen{margin:1rem 0 1.2rem;padding-left:1.2rem;line-height:1.6}
.leenstappen li{margin-bottom:6px}
/* galerij op de pagina met eigen kleuren; nu nog plaatshouders */
.galerij{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:1rem}
@media(max-width:560px){
 .wkgrid{grid-template-columns:1fr}
}