:root{
  --navy:#0B1E8A; --blauw:#2D6BFF; --inkt:#1F2937; --mist:#F3F4F6; --wit:#fff;
  --nacht:#0A1020; --nacht-2:#111A33; --lijn:#E3E6EC; --grijs:#6B7280;
  --kop:'Barlow Condensed',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --breed:1240px; --rand:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--inkt);background:var(--wit);
  font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* De smalle kopletter (Barlow Condensed) staat ALLEEN in kapitalen op displaymaat.
   Klein is hij in kapitalen slecht leesbaar - de letters zijn smal, even hoog en
   missen de stok-en-staart waar een lezer woorden aan herkent (feedback Armando
   20-10-2026 over "WARM TAUPE" en de kopjes van de vijf redenen). De referentiesite
   doet het net zo: grote koppen in kapitaal, kaartkopjes in de gewone letter.
   Daarom: h1 en h2 in kapitaal, h3 in de bodyletter met gewone kapitalisatie.
   controleer.mjs rekent dit na, zodat het niet stil terugkomt. */
h1,h2{font-family:var(--kop);text-transform:uppercase;line-height:.95;
  letter-spacing:-.01em;margin:0;font-weight:800;color:var(--navy)}
h3{font-family:var(--body);text-transform:none;line-height:1.25;letter-spacing:0;
  margin:0;font-weight:700;color:var(--navy)}
p{margin:0 0 1em}
.wrap{max-width:var(--breed);margin:0 auto;padding-inline:var(--rand)}
.boven{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blauw);margin:0 0 14px}
.op-nacht .boven{color:#7FA6FF}

/* knoppen: op een telefoon mag een label over twee regels, anders bepaalt de
   knop de breedte van de pagina (zie playground/CLAUDE.md, meet op 360) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;font-size:15px;text-decoration:none;padding:14px 26px;border:0;
  border-radius:4px;cursor:pointer;transition:background .15s,color .15s;
  white-space:normal;overflow-wrap:anywhere;text-align:center;font-family:var(--body)}
.knop-p{background:var(--blauw);color:#fff}
.knop-p:hover{background:var(--navy)}
.knop-d{background:var(--navy);color:#fff}
.knop-d:hover{background:#07145D}
.knop-l{background:#fff;color:var(--navy)}
.knop-l:hover{background:var(--mist)}
.knop-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.knop-o:hover{background:rgba(255,255,255,.12)}

/* ---------- header ----------
   De smalle donkere topbalk erboven is er op 20-10-2026 uit (doorgestreept door
   Armando). Hij droeg niets eigens: beide regels staan elders op de pagina. */
.kop-site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--lijn)}
/* De kop blijft boven in beeld staan, dus een sprong naar een anker legt de bovenkant
   van dat blok eronder: de kop "Vraag vrijblijvend een prijs op" viel half weg achter
   de balk. Gemeten: 67 px hoog op een telefoon, 81 op een laptop. Sinds het
   offerteblok op elke pagina staat (20-10-2026) wordt er veel vaker binnen dezelfde
   pagina gesprongen, dus dit telt nu bij elke knop. */
[id]{scroll-margin-top:72px}
@media(min-width:721px){[id]{scroll-margin-top:88px}}
.kop-site .wrap{display:flex;align-items:center;gap:18px;min-height:76px;flex-wrap:wrap}
.merk{display:block;flex:0 0 auto}
.merk img{width:clamp(150px,20vw,210px)}
.hoofdnav{display:flex;gap:clamp(12px,1.6vw,26px);margin-left:auto;flex-wrap:wrap}
.hoofdnav a{font-size:14px;font-weight:600;text-decoration:none;color:var(--inkt);
  padding:6px 0;border-bottom:2px solid transparent}
.hoofdnav a:hover{color:var(--navy);border-bottom-color:var(--blauw)}
.kop-site .knop{padding:12px 20px;font-size:14px}

/* ---------- burger + lade (telefoonmenu) ----------
   De referentiesite heeft op een telefoon een heel scherm met genummerde regels en
   een uitklapbaar prijsblok. Hier stond eerst niets: de nav verdween onder 720px en
   alleen de offerteknop bleef. */
.burger{display:none;width:46px;height:46px;flex:0 0 auto;margin-left:auto;padding:0;
  border:1px solid var(--lijn);border-radius:4px;background:#fff;color:var(--navy);
  cursor:pointer;align-items:center;justify-content:center}
.burger:hover{background:var(--mist)}
.burger svg{display:block}
.lade{position:fixed;inset:0;z-index:95;background:#fff;color:var(--inkt);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.lade.aan{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.lade{transition:none}}
.lade-in{min-height:100%;display:flex;flex-direction:column;
  padding:16px var(--rand) calc(24px + env(safe-area-inset-bottom))}
.lade-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--lijn)}
.lade-top img{width:min(190px,52vw)}
.lade-sluit{width:46px;height:46px;flex:0 0 auto;padding:0;border:1px solid var(--lijn);
  border-radius:4px;background:#fff;color:var(--navy);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.lade-sluit:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.lade-nav{flex:1;padding:6px 0 10px}
.lade-item{border-bottom:1px solid var(--lijn)}
.lade-link{display:flex;align-items:center;gap:14px;width:100%;padding:15px 2px;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--inkt);
  text-decoration:none;font-family:var(--body)}
.lade-n{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--grijs)}
.lade-w{flex:1;font-family:var(--kop);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,7vw,34px);line-height:.95;color:var(--navy)}
/* Het plusje is een svg en geen letter: een gedraaide + uit de smalle kopletter
   wordt een dikke ster in plaats van een kruisje. */
.lade-plus{flex:0 0 auto;display:inline-flex;color:var(--blauw);transition:transform .15s}
.lade-item.open .lade-plus{transform:rotate(45deg)}
.lade-sub{display:none;padding:0 0 16px 30px}
.lade-item.open .lade-sub{display:block}
.lade-pak{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;margin-bottom:8px;border:1.5px solid var(--lijn);border-radius:5px;
  text-decoration:none}
.lade-pak b{display:block;font-size:14.5px;color:var(--navy);line-height:1.3}
.lade-pak small{display:block;font-size:12px;color:var(--grijs);line-height:1.4}
.lade-pak .prijs{font-family:var(--kop);font-size:23px;font-weight:800;color:var(--navy);
  line-height:1;white-space:nowrap;text-align:right}
.lade-pak .prijs i{display:block;font-family:var(--body);font-size:12px;font-style:normal;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs)}
.lade-voet{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--lijn)}
.lade-voet .knop{width:100%}
.lade-tel{text-align:center;font-weight:700;font-size:15px;color:var(--navy);text-decoration:none}
body.op-slot{overflow:hidden}

/* ---------- zwevende bel- en appknoppen ----------
   Opbouw van winterswijkvakantiehuis.nl, nagemeten met meet-winterswijk.mjs (telefoon)
   en meet-winterswijk-desk.mjs (laptop). Twee gelijke pillen van 48 px hoog, 12 px
   ertussen, label naast het icoon en geen donkere balk eromheen. Hun belknop is oranje;
   hier is dat zijn blauw (feedback Armando 20-10-2026).

   Zij zetten ze op BEIDE maten neer en wisselen alleen van vorm: op een laptop twee
   pillen onder elkaar rechtsonder, 24 px van de randen, zo breed als hun label; op een
   telefoon naast elkaar over de volle breedte, 16 px van de randen. Dat is hier nu ook
   zo (Armando 20-10-2026: "whatsapp / bel moet ook op desktop zijn zoals bij
   winterswijk") - tot dan stonden ze alleen onder 720 px.

   Komt omhoog zodra de hero voorbij is; hij staat altijd in de dom en gaat met
   visibility weg, zodat hij ook voor een schermlezer verdwijnt als hij niet zichtbaar
   is. De verschuiving is horizontaal op een laptop (hij glijdt de rechterrand uit) en
   verticaal op een telefoon, want een kolom die van onderen opkomt duikt daar achter
   de rand van het scherm. */
.zwevend{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;gap:12px;
  flex-direction:column;align-items:flex-end;
  transform:translateX(calc(100% + 34px));visibility:hidden;
  transition:transform .22s ease,visibility .22s,opacity .18s ease}
.zwevend.aan{transform:none;visibility:visible}
/* Weg zonder te verschuiven: zodra hij over een knop valt waar de bezoeker op moet
   tikken (Terug / Toon richtprijs, de knoppen onder het formulier) of zodra er in een
   veld getypt wordt. Armando, 20-10-2026: "staat bellen en whatsapp op de knoppen waar
   je op moet drukken om terug of verder te gaan". Met het toetsenbord open kruipt een
   position:fixed balk op iOS mee omhoog en staat hij precies over die knoppen.
   Bewust GEEN transform hier: de balk moet op zijn plek blijven staan, anders meet de
   botsingstest een verschoven balk, ziet geen botsing meer en knippert hij aan en uit. */
.zwevend.aan.weg{visibility:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.zwevend{transition:none}}
.zwevend a{flex:0 0 auto;min-width:0;height:48px;padding:0 20px;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;border-radius:999px;color:#fff;
  text-decoration:none;
  font-size:16px;font-weight:600;line-height:1;box-shadow:0 10px 26px rgba(10,16,32,.3)}
.zwevend svg{flex:0 0 auto}
.zwevend-wa{background:#20B85A}
.zwevend-wa:hover{background:#199A4B}
.zwevend-bel{background:var(--blauw)}
.zwevend-bel:hover{background:var(--navy)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--nacht);color:#fff;overflow:hidden}
.hero-foto{position:absolute;inset:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;opacity:.72}
.hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,16,32,.94) 0%,rgba(10,16,32,.78) 42%,rgba(10,16,32,.30) 100%)}
.hero .wrap{position:relative;display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;
  padding-block:clamp(44px,6vw,86px)}
.hero h1{color:#fff;font-size:clamp(42px,7.4vw,88px)}
.hero h1 span{display:block;color:var(--blauw)}
.hero-lead{font-size:clamp(16px,1.7vw,18.5px);color:#D3DAEA;max-width:34em;margin-top:20px}
.vinkjes{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:11px}
.vinkjes li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;
  font-size:15.5px;font-weight:500;color:#EAEEF7}
.vinkjes svg{margin-top:3px}
.hero-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.hero-onder{margin:26px 0 0;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:#8FA0C4;font-weight:600}

/* ---------- prijskaart: rekenhulp in drie stappen ----------
   Zelfde opbouw als de referentiesite: 01 pakket, 02 aantal m2, 03 richtprijs, met
   een balkje erboven dat laat zien waar je bent. De prijzen zijn die van Pascal. */
.kaart{background:#fff;color:var(--inkt);border-radius:6px;padding:clamp(20px,2.4vw,30px);
  box-shadow:0 26px 60px rgba(0,0,0,.4)}
.kaart h2{font-size:clamp(25px,2.5vw,30px)}  /* niet lager: onder 25px zijn de
   kapitalen van de smalle kopletter niet goed leesbaar, zie meet.mjs */
.kaart-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kaart-badge{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs);padding-top:4px}
.rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  list-style:none;margin:16px 0 18px;padding:0}
.rail li{border:1.5px solid var(--lijn);border-radius:5px;padding:9px 11px;
  color:var(--grijs);transition:background .15s,border-color .15s,color .15s}
.rail li i{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.12em}
.rail li span{display:block;font-size:13px;font-weight:700;line-height:1.25;
  overflow-wrap:anywhere}
.rail li.aan{background:var(--blauw);border-color:var(--blauw);color:#fff}
.rail li.af{border-color:#B9C5E8;color:var(--navy)}
.paneel-l{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blauw);margin:0 0 11px}
.paneel-l label{font:inherit;color:inherit}
.paneel-knoppen{display:flex;gap:10px;margin-top:16px}
.paneel-knoppen .knop{flex:1}
.knop-t{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--lijn)}
.knop-t:hover{background:var(--mist)}
.teller{display:grid;grid-template-columns:48px minmax(0,1fr) auto 48px;gap:8px;align-items:center}
/* input[type=number] hieronder is even specifiek en staat later, dus die won. Daardoor
   stond dit veld op 15px en zoomde iOS de hele pagina in zodra stap 02 het focus gaf.
   Vandaar het attribuut erbij: nu wint deze regel. */
.teller input[type=number]{text-align:center;font-weight:700;font-size:17px}
.teller input::-webkit-outer-spin-button,.teller input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.teller input[type=number]{-moz-appearance:textfield;appearance:textfield}
.teller-k{width:48px;height:46px;border:1.5px solid var(--lijn);border-radius:4px;
  background:#fff;color:var(--navy);font-size:21px;font-weight:700;line-height:1;cursor:pointer}
.teller-k:hover{background:var(--mist);border-color:#B9C5E8}
.teller-e{font-size:13px;font-weight:700;color:var(--grijs)}
.paneel-h{display:block;font-size:12px;color:var(--grijs);margin-top:8px;line-height:1.45}
.paneel-waarschuwing{margin:12px 0 0;padding:10px 12px;border-radius:4px;background:var(--mist);
  font-size:12.5px;color:var(--navy);font-weight:600;line-height:1.45}
.res{border:1.5px solid var(--lijn);border-radius:5px;padding:16px 17px;background:var(--mist)}
.res-meta{margin:0;font-size:13.5px;font-weight:700;
  color:var(--grijs);line-height:1.5}
.res-meta b{color:var(--navy)}
.res-bedrag{margin:6px 0 0;font-family:var(--kop);font-weight:800;line-height:1;
  font-size:clamp(34px,4.4vw,46px);color:var(--navy)}
.res-obv{margin:8px 0 0;font-size:12.5px;color:var(--grijs)}
.pakket{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border:1.5px solid var(--lijn);border-radius:5px;padding:13px 15px;margin-bottom:10px;
  cursor:pointer;transition:border-color .15s,background .15s}
.pakket:hover{border-color:#B9C5E8}
.pakket input{position:absolute;opacity:0;pointer-events:none}
.pakket:has(input:checked){border-color:var(--blauw);background:#F3F7FF}
.pakket:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.pakket b{display:block;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.3}
.pakket small{display:block;font-size:12.5px;color:var(--grijs);line-height:1.4}
.pakket .prijs{font-family:var(--kop);font-size:27px;font-weight:800;color:var(--navy);
  white-space:nowrap;line-height:1;text-align:right}
.pakket .prijs i{display:block;font-family:var(--body);font-size:12px;font-style:normal;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs)}
.veld{margin:0}
.veld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--inkt)}
.veld small{display:block;font-size:12px;color:var(--grijs);margin-top:5px;line-height:1.45}
/* 16px is hier geen smaak maar een ondergrens: Safari op iOS zoomt de HELE pagina in
   zodra een veld onder 16px focus krijgt, en die zoom blijft staan. De bezoeker kan de
   pagina dan opzij slepen en ziet rechts het witte paginavlak naast de secties staan
   (Armando, 20-10-2026: "zie witte rechts daar"). Stap 02 van de rekenhulp zette zelf
   focus op het m2-veld, dus dat gebeurde zonder dat je ergens op tikte.
   meet.mjs zakt op elk veld onder 16px.

   De selector noemde tot 26-10-2026 de types een voor een (number, text, tel). Daar
   ging het bij de verhuizing meteen mis: het nieuwe e-mailveld is type="email", stond
   dus in geen van die drie, en kwam op de 13,3px van de browser uit - precies de bug van
   20-10 terug, op een veld dat er die dag bij kwam. Een lijst met types mist stil de
   volgende die je toevoegt.

   Nu een selector die niets kan missen: alles wat een invoerveld is, behalve de types
   waar tekstmaat niet over gaat. :where() telt niet mee voor de specificiteit, dus
   ".teller input[type=number]" hierboven (die 17px en gecentreerd wil) wint nog steeds -
   met een gewone :not()-ketting zou deze regel die stil overrulen.

   Let op: geen backticks in dit commentaar. Dit blok staat IN de css-template-literal,
   dus een backtick hier sluit die literal en de bouw valt om met een syntaxfout een
   paar honderd regels verderop. Dat gebeurde op 26-10-2026 twee keer achter elkaar, en
   het kostte tijd omdat de bouw stil faalde achter een omleiding naar /dev/null en de
   meting daarna tegen de oude dist liep - die gaf dus nog de oude uitkomst. Draai een
   bouw zonder zijn uitvoer weg te gooien. */
input:where(:not([type=hidden],[type=radio],[type=checkbox],[type=submit],[type=button])),select,textarea{
  width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1.5px solid var(--lijn);
  border-radius:4px;background:#fff;color:var(--inkt)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blauw);outline-offset:0;border-color:var(--blauw)}
.kleine-regel{font-size:12px;color:var(--grijs);margin:14px 0 0;line-height:1.5}

/* ---------- loper ---------- */
.loper{background:var(--navy);color:#fff;overflow:hidden;padding:13px 0}
.loper-spoor{display:flex;gap:0;width:max-content;animation:schuif 34s linear infinite}
@keyframes schuif{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.loper-spoor{animation:none}}
.loper-spoor span{font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.loper-spoor span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--blauw)}

/* ---------- secties ---------- */
section{padding-block:clamp(50px,6.4vw,96px)}
.op-mist{background:var(--mist)}
.op-nacht{background:var(--nacht);color:#DDE3F0}
.op-nacht h2{color:#fff}
.sectiekop{max-width:46em;margin-bottom:clamp(28px,3.4vw,46px)}
.sectiekop :is(h1,h2){font-size:clamp(29px,4.1vw,50px)}
.sectiekop p{margin-top:14px;font-size:16.5px;color:var(--grijs)}
.op-nacht .sectiekop p{color:#A9B5D0}

/* 5 genummerde punten */
.punten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border-top:1px solid var(--lijn)}
.punten>div{padding:26px clamp(12px,1.6vw,22px) 26px;border-right:1px solid var(--lijn)}
.punten>div:last-child{border-right:0}
.punten .n{font-family:var(--kop);font-size:34px;font-weight:800;color:var(--blauw);line-height:1}
.punten h3{font-size:16px;margin:11px 0 0;color:var(--navy);line-height:1.3}

/* vakman */
.vakman{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(22px,3.2vw,48px);align-items:center;background:#fff;border-radius:6px;
  overflow:hidden;box-shadow:0 18px 44px rgba(11,30,138,.09)}
.vakman-foto{position:relative;align-self:stretch;min-height:260px}
.vakman-foto img{width:100%;height:100%;object-fit:cover}
.vakman-foto .vlag{position:absolute;left:0;bottom:22px;background:var(--blauw);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:9px 16px}
.vakman-tekst{padding:clamp(22px,3vw,40px) clamp(22px,3vw,44px) clamp(22px,3vw,40px) 0}
.vakman h2{font-size:clamp(26px,3.3vw,40px)}
.vakman p{margin-top:14px;font-size:16px;color:#4B5563}
blockquote{margin:22px 0;padding:16px 20px;border-left:4px solid var(--blauw);
  background:var(--mist);border-radius:0 4px 4px 0}
blockquote p{margin:0;font-size:17px;font-weight:600;color:var(--navy);font-style:italic}
blockquote cite{display:block;margin-top:7px;font-size:12.5px;font-style:normal;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grijs);font-weight:700}

/* kleurkaarten ----------------------------------------------------------------
   Opbouw van de referentiesite: kop links en de lead rechts ernaast, drie staande
   foto's met een eigen bijschriftbalk ONDER de foto (geen verloop eroverheen) en
   een vierkant kleurvlakje ervoor. Op een telefoon schuiven ze opzij met stippen
   eronder, zodat de derde kaart niet onder de vouw verdwijnt. */
.kleurkop{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,3vw,36px);flex-wrap:wrap;margin-bottom:clamp(22px,2.8vw,34px)}
.kleurkop h2{font-size:clamp(29px,4.1vw,50px)}
.kleurkop .boven{margin-bottom:12px}
.kleurkop p{margin:0;font-size:15.5px;color:#A9B5D0;max-width:38ch;line-height:1.6}
.kleuren{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.kleurkaart{margin:0;background:var(--nacht-2);border:1px solid rgba(255,255,255,.12);
  border-radius:5px;overflow:hidden}
.kleurkaart img{width:100%;aspect-ratio:4/5;object-fit:cover}
.kleurkaart figcaption{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:#0E1730}
.kleurkaart .stip{width:16px;height:16px;flex:0 0 auto;border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.kleurkaart b{display:block;font-family:var(--body);font-weight:700;font-size:16px;
  text-transform:none;line-height:1.25;color:#fff}
.kleurkaart small{display:block;margin-top:2px;font-size:13.5px;
  text-transform:none;color:#8FA0C4;font-weight:500}
.kleurstippen{display:none}
.kleurvoet{margin:16px 0 0;font-size:14px;color:#8FA0C4;font-weight:500}

/* de verf: drie kaarten met de Sikkens-producten waarmee Pascal text (doorgegeven via
   Armando, 20-10-2026 - tot die dag stond het verfmerk als vraag in de README, omdat
   "A-merk materialen o.a. Sikkens" een USP van de referentiesite was en niet van hem).
   Een lichte sectie tussen de donkere kleurensectie en de witte werksectie, zodat er
   geen twee witte blokken tegen elkaar aan komen te staan.
   De vlag ("Strepen en stoten") staat in de gewone letter met ruimte ertussen, niet in
   de smalle kopletter: die mag op 12 px niet in kapitalen (zie de regel bij h1/h2). */
.verfkop{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,3vw,36px);flex-wrap:wrap;margin-bottom:clamp(22px,2.8vw,34px)}
.verfkop h2{font-size:clamp(29px,4.1vw,50px)}
.verfkop .boven{margin-bottom:12px}
.verfkop p{margin:0;font-size:15.5px;color:var(--grijs);max-width:46ch;line-height:1.6}
.verfkaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px)}
.verfkaart{background:#fff;border:1px solid var(--lijn);border-radius:5px;
  padding:clamp(16px,1.9vw,22px);display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.verfvlag{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blauw);background:#EDF3FF;border-radius:3px;
  padding:4px 9px;line-height:1.5}
.verfkaart h3{font-size:17px;overflow-wrap:anywhere}
.verfkaart .verfregel{margin:0;font-size:14.5px;color:var(--grijs);line-height:1.6}
@media (max-width:759px){
  .kleuren{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kleuren::-webkit-scrollbar{display:none}
  .kleurkaart{flex:0 0 78%;scroll-snap-align:center}
  .kleurstippen{display:flex;gap:8px;justify-content:center;margin-top:14px}
  .kleurstippen span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
  .kleurstippen span.aan{background:var(--blauw)}
}

/* werk: een strook die opzij schuift, zoals de projectenstrook van de referentiesite
   (verzoek Armando, 20-10-2026). Boven de strook de teller, eronder de duimnagels met
   een blauw kader om de foto die in beeld staat. De tussenruimte is BEWUST een vast
   getal en geen clamp(): het javascript rekent de scrollpositie uit met
   kaartbreedte + WERK_GAT, en dat klopt alleen als beide hetzelfde zijn. */
.werkteller{margin:0 0 14px;font-family:var(--kop);font-size:15px;font-weight:800;
  letter-spacing:.14em;color:var(--grijs)}
.werkteller b{color:var(--navy)}
.werk{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.werk::-webkit-scrollbar{display:none}
.werkkaart{margin:0;flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;
  background:#fff;border-radius:5px;overflow:hidden;border:1px solid var(--lijn)}
.werkkaart img{width:100%;aspect-ratio:4/3;object-fit:cover}
.werkkaart figcaption{padding:14px 17px 16px}
.werkkaart .n{font-family:var(--kop);font-size:25px;font-weight:800;color:var(--blauw);line-height:1}
.werkkaart p{margin:6px 0 0;font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.4}
.werkduim{display:flex;gap:8px;margin-top:clamp(14px,1.8vw,20px);overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.werkduim::-webkit-scrollbar{display:none}
.werkduim button{flex:0 0 auto;padding:0;line-height:0;cursor:pointer;background:none;
  border:2px solid transparent;border-radius:4px;overflow:hidden;opacity:.5;transition:opacity .18s}
.werkduim button.aan{border-color:var(--blauw);opacity:1}
.werkduim button:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.werkduim img{width:84px;height:56px;object-fit:cover;display:block}

/* dienstenstrook: wat Pascal nog meer doet, zonder de pagina van renovlies af te halen
   (feedback Armando, 20-10-2026). Bewust GEEN volle sectie: geen eigen achtergrond, geen
   foto's, geen tweede offerteblok. Hij staat nu bovenaan de werksectie, boven de kop
   "Eerder werk", met de scheidslijn ERONDER: een lijn boven zou hier vlak onder de
   donkere kleurensectie komen te staan, en dan scheidt hij niets. De kop is een maat
   groter dan eerst (hij was op zijn oude plek niet terug te vinden) maar blijft onder
   .sectiekop h2, zodat "Werk van Pascal" eronder nog steeds de kop van de sectie is. */
.dband{margin-bottom:clamp(30px,3.8vw,50px)}
/* De volgorde in de html is tekst, lijst, knop: op een telefoon stapelt dat in de
   leesvolgorde die je wilt. Op een breed scherm zet grid-template-areas de lijst
   rechts naast tekst en knop samen. */
.dband .rand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"tekst lijst" "knop lijst";
  gap:4px clamp(16px,2.6vw,40px);align-items:start;border-bottom:1px solid var(--lijn);
  padding-bottom:clamp(22px,2.6vw,32px)}
.dband .dtekst{grid-area:tekst}
.dband .dknop{grid-area:knop}
.dband .dlijst{grid-area:lijst;align-self:center}
.dband h2{font-size:clamp(25px,3.2vw,38px);max-width:24ch}
.dband .boven{margin-bottom:10px}
.dband .dtekst p{margin:10px 0 0;font-size:15px;color:var(--grijs);line-height:1.6;max-width:46ch}
/* Drie diensten sinds 20-10-2026 (traprenovatie doet Pascal niet meer), dus een kolom
   in plaats van twee: 3 in een raster van 2 geeft twee regels van 2 en 1, en dat leest
   als een vergeten vierde. Er is geen vierde dienst, en een blok vullen met iets dat
   hij niet doet is precies wat hier niet mag. */
.dlijst{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,auto);justify-content:start;
  gap:11px clamp(14px,2vw,26px)}
.dlijst li{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;
  color:var(--navy);line-height:1.35}
.dlijst li::before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:2px;
  background:var(--blauw)}
.dband .dknop{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  justify-self:start;font-size:14.5px;font-weight:700;color:var(--blauw);text-decoration:none}
.dband .dknop:hover{text-decoration:underline}

/* stappen: genummerde regels in plaats van kaarten. Armando vergeleek op 20-10-2026
   de lijst van de referentiesite met onze kaartjes: de lijst is duidelijker in
   structuur en minder leeswerk. Cijfer links, korte kop, een regel eronder. */
.rijen{display:grid;max-width:940px;border-top:2px solid var(--navy)}
.rijen>div{display:grid;grid-template-columns:clamp(52px,6.5vw,82px) minmax(0,1fr);
  gap:clamp(8px,1.6vw,20px);align-items:baseline;
  padding:clamp(15px,1.9vw,21px) 0;border-bottom:1px solid var(--lijn)}
.rijen .n{font-family:var(--kop);font-size:clamp(28px,3.6vw,38px);font-weight:800;
  color:var(--blauw);line-height:1}
.rijen h3{font-size:clamp(16px,1.7vw,18px);margin:0 0 5px}
.rijen p{margin:0;font-size:15px;color:var(--grijs);line-height:1.55}

/* vragen */
.vragenlijst{display:grid;gap:9px;max-width:900px}
details{background:#fff;border:1px solid var(--lijn);border-radius:5px}
details[open]{border-color:#C3D0F2}
summary{cursor:pointer;list-style:none;padding:16px 50px 16px 18px;font-weight:600;
  font-size:15.5px;color:var(--navy);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid var(--blauw);border-bottom:2px solid var(--blauw);
  transform:rotate(45deg);transition:transform .18s}
details[open] summary::after{transform:rotate(225deg);margin-top:-3px}
summary:focus-visible{outline:2px solid var(--blauw);outline-offset:-2px}
details p{margin:0;padding:0 18px 17px;font-size:15px;color:#4B5563;line-height:1.65}

/* offerte */
.offerte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(22px,3.2vw,46px);align-items:start}
.formulier{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.formulier .heel{grid-column:1/-1}
.formulier .knop{width:100%}
textarea{min-height:110px;resize:vertical}
/* De verstuurknop is sinds 26-10-2026 een <button> en geen <a>. Een knop erft de
   .knop-opmaak niet helemaal: een browser zet zijn eigen rand, achtergrond en
   lettertype op een button, dus die drie moeten hier expliciet terug. */
button.knop{border:0;font:inherit;cursor:pointer}
button.knop[disabled]{opacity:.6;cursor:default}
/* Het lokvink. display:none, want dat houdt hem ook uit de toetsvolgorde en uit wat
   een schermlezer voorleest - een veld buiten beeld schuiven met left:-9999px laat
   hem dat allebei nog wel halen. Een bot die het formulier uitleest ziet hem en vult
   hem; een bezoeker komt er nooit bij. */
.lokvink{display:none}
.uitkomst{grid-column:1/-1;margin:0;font-size:15px;font-weight:600;line-height:1.5}
.uitkomst:empty{display:none}
.uitkomst.goed{color:#15803D}
.uitkomst.mis{color:#B42318}
.uitkomst.bezig{color:var(--grijs)}
.zijpaneel{background:var(--nacht);color:#DDE3F0;border-radius:6px;padding:clamp(22px,2.6vw,32px)}
.zijpaneel h3{color:#fff;font-size:20px}
.zijpaneel dl{margin:18px 0 0;display:grid;gap:14px}
.zijpaneel dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8FA0C4;font-weight:700}
.zijpaneel dd{margin:3px 0 0;font-size:16px;font-weight:600;color:#fff;overflow-wrap:anywhere}
.zijpaneel dd a{text-decoration:none}
.zijpaneel dd a:hover{color:var(--blauw)}

/* slot + voet */
.slot{background:var(--navy);color:#fff}
.slot .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.slot h2{color:#fff;font-size:clamp(27px,3.7vw,44px);max-width:16em}
.slot p{margin:10px 0 0;color:#C6D2F5;font-size:16px}
.slot-knoppen{display:flex;gap:12px;flex-wrap:wrap}
footer{background:var(--nacht);color:#9BA7C2;padding-block:clamp(40px,5vw,64px) 0;font-size:14.5px}
.voet{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,44px)}
footer img{width:200px;margin-bottom:16px}
footer h3{color:#fff;font-size:15px;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--blauw)}
.voet-onder{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid rgba(255,255,255,.1);
  padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}

/* ---------- smaller ---------- */
@media (max-width:1040px){
  .hero .wrap{grid-template-columns:1fr}
  .vakman{grid-template-columns:1fr}
  .vakman-tekst{padding:0 clamp(20px,4vw,34px) clamp(26px,4vw,36px)}
  .punten{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .punten>div{border-right:0;border-top:1px solid var(--lijn)}
  .werkkaart{flex:0 0 calc((100% - 16px)/2)}
  /* Drie verfkaarten naast elkaar worden hieronder te smal voor "Alpha Rezisto Anti
     Marks": twee kolommen, de derde (de optionele) over de volle breedte. */
  .verfkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .verfkaarten>:last-child{grid-column:1/-1}
  .dband .rand{grid-template-columns:1fr;grid-template-areas:"tekst" "lijst" "knop";gap:0}
  .dband .dlijst{align-self:start;margin-top:18px}
  .dband .dknop{margin-top:18px}
  .offerte{grid-template-columns:1fr}
  .voet{grid-template-columns:1fr 1fr}
}
/* Op een telefoon krijgen de vijf redenen dezelfde opbouw als de stappen: cijfer
   links naast de kop in plaats van twee kolommen met blokjes. */
@media (max-width:760px){
  .punten{grid-template-columns:1fr;border-top:2px solid var(--navy)}
  .punten>div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;
    align-items:baseline;padding:15px 0;border-top:0;border-bottom:1px solid var(--lijn)}
  .punten .n{font-size:28px}
  .punten h3{margin:0;font-size:16px}
}
@media (max-width:720px){
  .hoofdnav{display:none}
  .kop-site .wrap{min-height:66px;justify-content:space-between}
  .kop-site>.wrap>.knop{display:none}
  .burger{display:inline-flex}
  /* Op een telefoon worden het twee pillen naast elkaar over de volle breedte, zoals
     bij winterswijk. Daarboven blijven ze de kolom rechtsonder uit de basisregels. */
  .zwevend{flex-direction:row;align-items:stretch;left:16px;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    transform:translateY(calc(100% + 26px))}
  .zwevend a{flex:1 1 0;padding:0 12px}
  /* ruimte onder de pagina, anders dekt de zwevende balk de laatste regel af.
     Alleen hier: op een laptop staan de knoppen in de hoek en dekken ze niets af.
     Die ruimte hoort IN de voet en niet onder de body (Armando, 20-10-2026): de
     body is wit, dus onder de donkere voet stond een witte strook achter de
     knoppen. In de voet is het dezelfde kleur als de voet zelf. */
  footer{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .werkkaart{flex:0 0 86%}
  .verfkaarten{grid-template-columns:1fr}
  .formulier{grid-template-columns:1fr}
  .voet{grid-template-columns:1fr}
  .slot .wrap{align-items:flex-start}
}
@media (max-width:470px){
  /* "Sauswerk, plafonds en wanden" past op 360 niet in een halve kolom. */
  .dlijst{grid-template-columns:1fr;gap:9px}
}
@media (max-width:420px){
  /* De prijs blijft rechts naast de pakketnaam staan, net als bij de referentiesite.
     Stapelen maakte de kaart een stuk langer zonder dat het leesbaarder werd. */
  .pakket{padding:12px 13px}
  .pakket .prijs{font-size:23px}
  .rail li span{font-size:12px}
}

/* ---------- tweede pagina: /werkwijze/ ----------
   De referentiesite heeft hier een eigen pagina met een kop, een stappenlijst en
   daarna de stappen uitgewerkt met een foto ernaast. Zelfde opbouw, maar met de
   onderdelen die Pascal zelf opschrijft. */
.meerlink{margin:clamp(20px,2.4vw,28px) 0 0;font-size:15px;font-weight:700}
.meerlink a{display:inline-flex;align-items:center;gap:9px;color:var(--navy);
  text-decoration:none;border-bottom:2px solid var(--blauw);padding-bottom:3px}
.meerlink a:hover{color:var(--blauw)}

.paginakop{position:relative;background:var(--nacht);color:#fff;overflow:hidden}
.paginakop-foto{position:absolute;inset:0}
.paginakop-foto img{width:100%;height:100%;object-fit:cover;opacity:.62}
.paginakop-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,16,32,.93) 0%,rgba(10,16,32,.78) 48%,rgba(10,16,32,.34) 100%)}
.paginakop .wrap{position:relative;padding-block:clamp(26px,3.4vw,44px) clamp(40px,5.4vw,74px)}
.paginakop h1{color:#fff;font-size:clamp(36px,6.2vw,70px);max-width:20ch}
.paginakop h1 span{display:block;color:var(--blauw)}
.paginakop .hero-lead{max-width:40em}
.paginakop .hero-knoppen{margin-top:28px}
.kruimels{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8FA0C4}
.kruimels a{color:#C7D0E4;text-decoration:none}
.kruimels a:hover{color:#fff}
.kruimels b{color:#fff}

/* uitleg: tekst met de foto ernaast, om en om */
.uitleg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,54px);align-items:center;padding-block:clamp(26px,3.4vw,44px);
  border-top:1px solid var(--lijn)}
.uitleg:first-child{border-top:0;padding-top:0}
.uitleg-om .uitleg-tekst{order:2}
.uitleg h2{font-size:clamp(25px,3.1vw,38px)}
.uitleg .boven{margin-bottom:11px}
.uitleg-tekst p{margin:14px 0 0;font-size:16px;color:#4B5563;max-width:46em}
.uitleg-foto{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--lijn);background:#fff}
.uitleg-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* de drie soorten naast elkaar (/werkwijze/, 25-10-2026). Drie gelijke kaarten die
   ELK hun eigen regel dragen: wat het is en wat het onderscheidt.
   Tot 25-10-2026 droeg elke kaart ook een vlaggetje met het ene kenmerk
   (SCHEUROVERBRUGGEND / PATROON BLIJFT ZICHTBAAR / NIET OM OVER TE TEXEN) en was de
   derde kaart gedempt. Armando streepte alle drie de vlaggen door en vroeg om een
   gelijke kleur voor vliesbehang. De vlag zei bovendien in kapitalen wat de alinea
   drie regels lager in gewone zinnen zegt, en de demping maakte van een uitlegkaart
   een afgekeurde optie - terwijl de kaart er staat omdat mensen het woord verwarren.
   Het onderscheid draagt de tekst nu alleen, en dat is waar controle 15b op zit. */
.soorten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.soort{background:#fff;border:1px solid var(--lijn);border-radius:6px;
  padding:clamp(18px,2.1vw,26px);display:flex;flex-direction:column;gap:10px}
.soort h3{font-size:19px;overflow-wrap:anywhere}
.soort .wat{margin:0;font-size:13px;font-weight:700;color:var(--navy);opacity:.72}
.soort p.soort-b{margin:0;font-size:15px;color:#4B5563;line-height:1.62}
/* Stond onder het soortenblok op /werkwijze/ (die regel is er op 25-10-2026 uit op
   aanwijzing van Pascal) en staat nu onder de verfkaarten op de startpagina. Vandaar
   een naam die niet meer naar een van de twee blokken verwijst. */
.blok-voet{margin:clamp(16px,2vw,24px) 0 0;font-size:15.5px;color:#4B5563;
  line-height:1.65;max-width:62em}
@media (max-width:860px){
  .soorten{grid-template-columns:1fr}
}

/* prijs en afspraken. Stond tot 20-10-2026 op de donkere band; die was te donker
   (Armando) en de pagina had daarmee drie zwarte vlakken onder elkaar. Nu een
   lichte band tussen de grijze uitleg en het blauwe slot.
   HET GRIJZE VAK (Armando, 25-10-2026: "bij wat het kost is er een vak grijs; dat
   moet wit worden net als de rest"). De oorzaak zat in deze twee regels samen. De
   lijnen tussen de kaarten waren geen randen maar de ACHTERGROND van het raster die
   door een gat van 1 px heen schijnt, en de laatste kaart liep over de volle breedte.
   Acht afspraken in drie kolommen is dan 3 + 3 + 1 + de volle regel: in die derde
   regel blijven twee cellen leeg, en een lege cel heeft geen witte kaart in zich, dus
   daar zie je de achtergrond op volle grootte. Precies een grijs vak, en het schoof
   mee met elke afspraak die erbij kwam.
   Twee dingen daarom veranderd. De achtergrond van het raster is wit en de lijnen
   komen nu van de kaarten zelf (een ring van 1 px, die in het gat van 1 px met de
   ring van de buur samenvalt en langs de buitenrand door overflow:hidden wordt
   weggeknipt) - dan is een lege cel wit in plaats van grijs, bij elk aantal. En de
   laatste twee kaarten delen de slotregel in plaats van een volle regel voor een
   kaart, zodat er helemaal geen lege cel meer is. Het zijn twee oplossingen voor een
   fout, en dat is hier bewust: de tweede is de nette indeling voor acht afspraken, de
   eerste is de bodem die ook houdt als het er negen worden.
   meet.mjs rekent na dat elke rasterregel helemaal gevuld is. */
.afspraken{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:#fff;border:1px solid var(--lijn);border-radius:6px;
  overflow:hidden}
.afspraak{background:#fff;padding:clamp(18px,2.2vw,26px);grid-column:span 2;
  box-shadow:0 0 0 1px var(--lijn)}
/* acht kaarten: zes in twee volle regels van drie, de laatste twee elk een halve
   regel. Geen lege cel, dus ook geen vak dat van de rest afwijkt. */
.afspraak:nth-last-child(-n+2){grid-column:span 3}
.afspraak h3{font-size:16.5px;color:var(--navy);margin-bottom:8px}
.afspraak p{margin:0;font-size:15px;color:#4B5563;line-height:1.6}
.afspraak-voet{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,34px)}
.afspraak-voet p{margin:0;font-size:14px;color:var(--grijs);max-width:40em}
#afspraken blockquote{margin:clamp(24px,3vw,38px) 0 0;background:var(--mist)}

@media (max-width:1040px){
  /* twee kolommen: acht kaarten vullen vier volle regels, dus hier mag de slotregel
     NIET gedeeld worden - anders staan de laatste twee op een halve kolom en blijft
     er weer een gat. Zelfde reden als hierboven, andere rekensom. */
  .afspraken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .afspraak,.afspraak:nth-last-child(-n+2){grid-column:span 1}
}
@media (max-width:860px){
  .uitleg{grid-template-columns:1fr;gap:20px}
  .uitleg-om .uitleg-tekst{order:0}
}
@media (max-width:560px){
  .afspraken{grid-template-columns:1fr}
  .afspraak,.afspraak:nth-last-child(-n+2){grid-column:span 1}
}