@font-face{font-family:'Barlow Condensed';src:url('/lettertype/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('/lettertype/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/lettertype/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

/* ================================================================
   MIDNIGHT CLEAN - de stijl van de site. Strikt zwart-wit, de
   logokleuren: afwisselend witte, lichtgrijze en zwarte vlakken met
   haarlijnen ertussen. De regels onder [data-thema=midnight-clean]
   zijn de laag die clean onderscheidde van de twee andere stijlen;
   dat attribuut staat sinds 07-10-2026 vast op elke pagina, de
   wisselaar en carbon.css zijn eruit (keuze Armando).
   ================================================================ */
:root{
  --zwart:#000;
  --wit:#fff;
  --grafiet:#555;
  /* grafiet is op zwart niet leesbaar; dit zijn de twee lichte tegenhangers */
  --op-zwart:#cfcfcf;
  --op-zwart-zacht:#9a9a9a;
  --lichtgrijs:#F2F2F2;
  --lijn:#e2e2e2;
  --ster:#F5A623;
  --ws-groen:#37FA22;
  --ws-paars:#230D2D;
  --wa:#25D366;
  --wa-diep:#1DA851;
  --kop:'Barlow Condensed',Impact,sans-serif;
  --tekst:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --breed:1180px;
  --balk:76px;
  /* één ronding-schaal voor de hele site: elk vlak, veld en knop pakt er een
     uit. Losse getallen per onderdeel gaven scherpe en ronde hoeken door
     elkaar heen. */
  --rond-s:10px;
  --rond-m:16px;
  --rond-l:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--tekst);
  font-size:17px;
  line-height:1.65;
  color:var(--zwart);
  background:var(--wit);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* koppen staan in gewone schrijfwijze, niet in kapitalen: in Barlow Condensed
   worden hele regels kapitaal een blok dat schreeuwt. Lagere regelafstand kan
   nu niet meer: onderlengtes (g, j, p) lopen dan over de volgende regel. */
h1,h2,h3{font-family:var(--kop);font-weight:700;letter-spacing:.005em;line-height:1.02;margin:0}
h1{font-size:clamp(2.9rem,6.4vw,4.8rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.5rem;line-height:1.12}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
h1+p,h2+p,h3+p{margin-top:18px}
h3+p{margin-top:9px}

.binnen{width:100%;max-width:var(--breed);margin:0 auto;padding:0 24px}
.vak{padding:clamp(46px,5vw,72px) 0}
.vak--grijs{background:var(--lichtgrijs)}
.vak--zwart{background:var(--zwart);color:var(--wit)}
.vak--zwart p{color:var(--op-zwart)}

.lood{font-size:1.1rem;color:var(--grafiet);max-width:62ch}
.vak--zwart .lood{color:var(--op-zwart)}
.vak--zwart .lood strong{color:var(--wit)}
.kopgroep{margin-bottom:clamp(24px,3vw,38px)}
.kopgroep h2{margin-bottom:14px}
/* streep onder de kop: stond alleen in Carbon, dus nergens meer in beeld */
.streep{display:none}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--tekst);font-weight:600;font-size:.95rem;
  padding:15px 28px;border:2px solid var(--zwart);border-radius:999px;
  text-decoration:none;background:var(--zwart);color:var(--wit);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap;
}
.knop:hover{background:var(--grafiet);border-color:var(--grafiet)}
.knop--om{background:transparent;color:var(--zwart)}
.knop--om:hover{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.knop--licht{background:var(--wit);color:var(--zwart);border-color:var(--wit)}
.knop--licht:hover{background:transparent;color:var(--wit);border-color:var(--wit)}
.knop--wit{
  background:var(--wit);color:var(--zwart);border-color:var(--wit);
  box-shadow:0 10px 32px -14px rgba(255,255,255,.55);
}
.knop--wit:hover{
  background:#e6e6e6;border-color:#e6e6e6;color:var(--zwart);
  box-shadow:0 12px 36px -12px rgba(255,255,255,.7);
}
.knop--wa{
  background:var(--wa);color:var(--wit);border-color:var(--wa);
  box-shadow:0 10px 32px -12px rgba(37,211,102,.7);
}
.knop--wa:hover{
  background:var(--wa-diep);border-color:var(--wa-diep);color:var(--wit);
  box-shadow:0 12px 36px -10px rgba(37,211,102,.85);
}
.knoppen{display:flex;flex-wrap:wrap;gap:14px}
.knop svg{width:18px;height:18px;flex:none;fill:currentColor}

/* ---------- balk ---------- */
.balk{
  position:sticky;top:0;z-index:50;
  background:var(--zwart);color:var(--wit);
  /* geen lijn eronder: balk en hero zijn allebei #000 en moeten in elkaar overlopen */
}
.balk .binnen{display:flex;align-items:center;gap:20px;height:76px}
.balk__logo{display:block;flex:none}
.balk__logo img{height:34px;width:auto}
.balk nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.balk nav a:not(.knop){
  text-decoration:none;font-size:.9rem;font-weight:600;color:var(--op-zwart);
  letter-spacing:.02em;transition:color .15s;
}
.balk nav a:not(.knop):hover,.balk nav a:not(.knop)[aria-current]{color:var(--wit)}
.balk .knop{padding:11px 20px;font-size:.88rem}
.balk__mob{display:none}
.balk__bel-kort{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--zwart);color:var(--wit);overflow:hidden}
.hero__wrap{position:relative;z-index:1;width:100%;max-width:var(--breed);margin:0 auto;padding:0 24px}
.hero__grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(36px,5vw,64px);
  /* schermvullend: precies het scherm min de balk, dus geen witte streep onderaan.
     svh houdt rekening met de adresbalk van de telefoon, vh is de terugval. */
  min-height:calc(100vh - var(--balk));
  min-height:calc(100svh - var(--balk));
}
.hero__tekst{padding:clamp(48px,5vw,72px) 0;display:flex;flex-direction:column;justify-content:center}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal;display:block;color:var(--wit)}
.hero__lood{font-size:1.15rem;color:var(--op-zwart);max-width:46ch;margin-bottom:30px}

.hero__cijfer{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin-top:26px;
  align-self:flex-start;text-decoration:none;font-size:.88rem;color:var(--op-zwart-zacht);
}
.hero__cijfer b{font-weight:600;color:var(--wit);font-size:.95rem}
.hero__cijfer:hover span.tel{color:var(--wit)}
.sterren{color:var(--ster);letter-spacing:2px;font-size:.9rem}

/* Werkspot-logo in eigen kleur, dus altijd op wit.
   content-box: de hoogte is die van het logo zelf, de padding komt eromheen.
   Met border-box at de padding het logo op en bleef er 8px over. */
.ws__mark{
  box-sizing:content-box;
  width:auto;height:15px;display:block;
  background:var(--wit);border-radius:999px;padding:5px 11px;
}

.bewijs{
  display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px;
  font-size:.9rem;color:var(--op-zwart);
}
.bewijs span{display:inline-flex;align-items:center;gap:9px}
.bewijs svg{width:19px;height:19px;flex:none;fill:var(--wit)}

.hero__beeld{position:relative;align-self:center}
.hero__beeld::after{
  content:"";position:absolute;right:-18px;bottom:-18px;width:62%;height:42%;
  border-radius:var(--rond-l);z-index:0;
  background:linear-gradient(135deg,#2f2f2f,var(--grafiet));
}

/* ---------- hero: wisselende foto's ---------- */
.dia{
  position:relative;z-index:1;overflow:hidden;border-radius:var(--rond-l);
  background:#111;touch-action:pan-y;
  height:clamp(360px,44vw,540px);
  /* op een lage laptop mag de foto niet buiten het scherm vallen */
  max-height:calc(100svh - var(--balk) - 110px);
  box-shadow:0 36px 80px -34px rgba(0,0,0,.95);
}
.dia__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.001);
  transition:opacity 1.1s ease;
  will-change:opacity,transform;
}
/* de foto in beeld zoomt langzaam in; de volgende zoomt uit, zo wisselt de
   richting en loopt de reeks niet elke keer dezelfde kant op */
.dia__foto.is-aan{opacity:1;z-index:2;animation:dia-in 8s ease-out forwards}
.dia__foto.is-aan.dia--uit{animation-name:dia-uit}
/* de vorige foto blijft tijdens het overvloeien staan, alleen eronder: de
   nieuwe schuift eroverheen. Zou de oude meefaden, dan zie je er een moment
   de zwarte achtergrond doorheen. */
.dia__foto.is-af{opacity:1;z-index:1}
@keyframes dia-in{from{transform:scale(1.001)}to{transform:scale(1.1)}}
@keyframes dia-uit{from{transform:scale(1.1)}to{transform:scale(1.001)}}
.dia__stippen{
  position:absolute;right:16px;bottom:14px;z-index:3;display:flex;gap:7px;
}
.dia__stip{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .2s,transform .2s;
}
.dia__stip:hover{background:rgba(255,255,255,.75)}
.dia__stip[aria-current=true]{background:var(--wit);transform:scale(1.35)}

/* pijlen om zelf te bladeren; op een telefoon veeg je ook gewoon */
.dia__pijl{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.4);color:var(--wit);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .15s,border-color .15s,opacity .2s;
}
.dia__pijl:hover{background:rgba(0,0,0,.72);border-color:var(--wit)}
.dia__pijl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dia__pijl--terug{left:12px}
.dia__pijl--verder{right:12px}

/* ---------- zwevende WhatsApp ---------- */
.zweef{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:999px;
  background:var(--wa);color:var(--wit);
  font-family:var(--tekst);font-weight:600;font-size:.95rem;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:transform .2s,background .15s,opacity .25s;
}
.zweef:hover{transform:translateY(-3px);background:var(--wa-diep)}
.zweef svg{width:22px;height:22px;flex:none;fill:#fff}
/* uit beeld zodra er al een WhatsApp-knop op het scherm staat */
.zweef.is-weg{opacity:0;transform:translateY(14px) scale(.9);pointer-events:none}

/* ---------- diensten ---------- */
/* Foto boven, tekst eronder in de kaart. Tekst óp de foto las slechter, ook met
   een sluier eronder. De kaart opent de foto schermvullend; de klant wil geen
   losse dienstpagina's, dus het is een vergrootglas en geen doorklik. */
.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.dienst{
  font:inherit;text-align:left;cursor:zoom-in;width:100%;
  display:flex;flex-direction:column;
  background:var(--wit);color:var(--zwart);
  border:1px solid var(--lijn);border-radius:var(--rond-l);
  padding:14px 14px 22px;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.dienst:hover{transform:translateY(-3px);border-color:var(--grafiet);box-shadow:0 26px 48px -26px rgba(0,0,0,.3)}
.dienst:focus-visible{outline:2px solid var(--zwart);outline-offset:3px}
/* height:auto is hier niet optioneel: het height-attribuut in de HTML telt als
   opmaak, en zolang dat een waarde heeft doet aspect-ratio niets */
.dienst img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--rond-m);margin-bottom:18px;
}
.dienst__tekst{padding:0 10px}
.dienst h3{margin-bottom:9px;font-size:1.5rem}
.dienst p{font-size:.95rem;line-height:1.5;color:var(--grafiet);margin:0}

/* grafiet als vlak, niet zwart: scheidt dit blok van de zwarte secties eronder */
.slot{
  margin-top:18px;padding:22px 26px;background:var(--grafiet);color:var(--wit);border-radius:var(--rond-l);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;justify-content:space-between;
}
.slot p{margin:0;font-size:1.05rem;max-width:60ch;color:var(--lichtgrijs)}
.slot strong{color:var(--wit)}

/* ---------- inzetbaar ---------- */
/* de haarlijnen zijn 1px gaten in een grafiet vlak, dus de ronding hoort op het
   vlak eromheen en niet op de cellen: die zouden de lijnen openbreken */
.inzet{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--grafiet);border:1px solid var(--grafiet);border-radius:var(--rond-m);overflow:hidden}
.inzet>div{background:var(--zwart);padding:26px 26px}
.inzet h3{margin-bottom:10px}
.inzet p{font-size:.95rem;margin:0}
/* zelfde raster op een licht vlak: witte cellen met dezelfde haarlijnen. Staat
   op de slotpagina onder "veelgestelde vragen". */
.inzet--licht{background:var(--lijn);border-color:var(--lijn)}
.inzet--licht>div{background:var(--wit)}
/* .inzet .tegel staat hieronder op display:none, want in dit raster hoort
   normaal geen icoon. In de spoedsectie op de slotpagina wel, en daar staat
   het op een licht vlak, dus het icoon is zwart en niet wit. Twee klassen
   diep, anders wint die regel. */
.inzet.inzet--licht .tegel{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;margin-bottom:16px;
}
.inzet.inzet--licht .tegel svg{
  width:30px;height:30px;
  fill:none;stroke:var(--zwart);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* zes cellen in plaats van drie. auto-fit maakt er op een breed scherm vier
   van en laat dan twee lege vakken achter, dus hier staat het aantal kolommen
   vast. */
.inzet--zes{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.inzet--zes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.inzet--zes{grid-template-columns:1fr}}
/* Losse opgetilde kaarten in plaats van het haarlijnraster, met het icoon
   zichtbaar: zelfde taal als de dienstkaarten op de homepagina in Midnight
   clean (verzoek Armando 07-10-2026). Staat op de slotpagina. Carbon doet dit
   met zijn eigen regels, die zijn specifieker en blijven voorgaan. */
.inzet--kaarten{background:none;border:0;border-radius:0;overflow:visible;gap:16px}
.inzet--kaarten>div{
  background:#141414;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--rond-l);padding:26px 26px 28px;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.inzet--kaarten>div:hover{
  transform:translateY(-3px);border-color:var(--grafiet);
  box-shadow:0 26px 48px -26px rgba(0,0,0,.75);
}
.inzet--kaarten h3{font-size:1.3rem}
/* twee klassen diep, anders wint .inzet .tegel{display:none} hieronder */
.inzet.inzet--kaarten .tegel{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;margin-bottom:20px;
}
.inzet.inzet--kaarten .tegel svg{
  width:32px;height:32px;
  fill:none;stroke:var(--wit);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* de tegel om een icoon is de drager in Carbon. Hier moet hij weg zonder het
   icoon mee te nemen, dus display:contents: het omhulsel verdwijnt uit de
   opmaak en de svg wordt zelf het flex-item. Alleen bij 'waar we werken'
   hoort er in deze stijl geen icoon te staan. */
.tegel{display:contents}
.inzet .tegel{display:none}
/* op de dienstkaarten draagt Midnight de foto, niet het icoon */
.dienst .tegel{display:none}

/* ---------- over ----------
   "Over RH Klusservice" hoort bij Midnight en bij Carbon, niet bij Midnight
   clean (verzoek Armando 06-10-2026: het blok eruit, maar wel te bekijken).
   Verbergen en niet weglaten uit het HTML, want het is één set secties voor
   drie stijlen. De fotoviewer in site.js slaat verborgen foto's zelf over
   (`offsetParent !== null` in open()), dus de reeks blijft kloppen. */
[data-thema=midnight-clean] #over,
[data-thema=midnight-clean] .nav--over{display:none}
.over{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,70px);align-items:center}
.over__beeld img{width:100%;height:clamp(340px,34vw,450px);object-fit:cover;border-radius:var(--rond-l);cursor:zoom-in}
.feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--rond-m);overflow:hidden;margin-top:26px}
.feiten div{background:var(--wit);padding:18px 18px}
.feiten b{display:block;font-family:var(--kop);font-size:2.1rem;line-height:1}
.feiten span{font-size:.84rem;color:var(--grafiet)}

/* ---------- stappen ---------- */
.stappen{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--rond-m);overflow:hidden}
.stap{background:var(--wit);padding:24px 24px;counter-increment:s;position:relative}
.stap::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--kop);font-size:2.2rem;line-height:1;
  color:var(--grafiet);display:block;margin-bottom:8px;
}
.stap h3{margin-bottom:8px}
.stap p{font-size:.94rem;color:var(--grafiet);margin:0}

/* ---------- klusinzicht ---------- */
.inzicht{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,5vw,64px)}
.inzicht__beeld{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:clamp(300px,31vw,400px);overflow:hidden}
/* min-height/min-width 0 is hier niet optioneel: een grid-item krijgt standaard
   min-height:auto, dus de foto's duwen de twee rijen voorbij de vaste hoogte van
   het blok en schilderen over de tekst eronder. overflow:hidden is de vangnet. */
.inzicht__beeld img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;border-radius:var(--rond-m);cursor:zoom-in}
.inzicht__beeld img:first-child{grid-row:span 2}

/* ---------- reviews ---------- */
.ws__kop{
  display:grid;grid-template-columns:1fr 1fr auto;gap:clamp(20px,4vw,60px);
  align-items:end;margin-bottom:clamp(28px,3.6vw,44px);
}
.ws__nav{display:flex;gap:10px}
.ws__pijl{
  width:44px;height:44px;flex:none;border-radius:999px;
  background:var(--wit);border:1px solid var(--lijn);color:var(--zwart);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .15s,background .15s,opacity .15s;
}
.ws__pijl:hover{border-color:var(--grafiet)}
.ws__pijl:disabled{opacity:.35;cursor:default;border-color:var(--lijn)}
.ws__pijl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws__titel{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ws__titel h2{margin:0}
.ws__merk{
  display:inline-flex;align-items:center;
  background:var(--wit);border:1px solid var(--lijn);border-radius:999px;
  padding:8px 16px;line-height:0;
}
.ws__merk img{width:auto;height:19px;display:block}
.ws__intro{font-size:1rem;color:var(--grafiet);max-width:52ch;margin:0}
.ws__intro a{color:var(--zwart);text-decoration:underline;text-underline-offset:3px}
/* De schuifrij loopt van rand tot rand, zodat je rechts ziet dat er meer staat
   in plaats van een kaart die tegen de kolom wordt afgekapt. De zijkant is
   precies de marge van .binnen, dus de eerste kaart blijft in de rooilijn. */
.ws__rand{overflow:hidden}
.ws__lijst{
  --ws-kant:max(24px, calc((100% - var(--breed)) / 2 + 24px));
  display:flex;align-items:stretch;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--ws-kant);
  padding:2px var(--ws-kant) 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ws__lijst::-webkit-scrollbar{display:none}
.ws__lijst:focus-visible{outline:2px solid var(--zwart);outline-offset:-2px}
.review{
  flex:0 0 clamp(300px,27vw,350px);scroll-snap-align:start;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond-m);
  padding:24px 26px 20px;display:flex;flex-direction:column;
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.review__top .sterren{font-size:1rem}
.review__datum{font-size:.84rem;color:var(--grafiet);white-space:nowrap}
/* alle kaarten even hoog: de tekst krijgt precies zes regels, langere
   beoordelingen klappen open met Lees meer */
.review p{
  font-size:1rem;margin:0 0 14px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;min-height:calc(6 * 1.65em);
}
.review.is-open p{-webkit-line-clamp:unset;overflow:visible;min-height:0}
.review__meer{
  display:none;align-self:flex-start;margin-bottom:16px;padding:0;
  font-family:var(--tekst);font-size:.9rem;font-weight:600;cursor:pointer;
  background:none;border:0;color:var(--zwart);
  text-decoration:underline;text-underline-offset:3px;
}
.review.heeft-meer .review__meer{display:inline-block}
.review footer{
  margin-top:auto;padding-top:17px;border-top:1px solid var(--lijn);
  display:flex;align-items:center;gap:12px;
}
.review__cirkel{
  width:34px;height:34px;flex:none;border-radius:999px;
  background:var(--grafiet);color:var(--wit);
  font-size:.84rem;font-weight:600;display:grid;place-items:center;
}
.review__wie b{display:block;font-weight:600;font-size:.95rem;line-height:1.35}
.review__wie small{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--grafiet)}
.review__wie svg{
  width:14px;height:14px;flex:none;fill:var(--ws-paars);
  background:var(--ws-groen);border-radius:999px;padding:1px;
}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px)}
.contact__blok{display:grid;gap:1px;background:var(--grafiet);border:1px solid var(--grafiet);border-radius:var(--rond-m);overflow:hidden;margin-bottom:26px}
.contact__blok a{
  background:var(--zwart);padding:20px 24px;text-decoration:none;
  display:flex;align-items:center;gap:16px;transition:background .15s;
}
.contact__blok a:hover{background:#141414}
.contact__blok svg{width:22px;height:22px;flex:none;fill:var(--wit)}
.contact__blok .rij--wa svg{fill:var(--wa)}
.contact__blok small{display:block;font-size:.82rem;color:var(--op-zwart-zacht);margin-bottom:2px}
.contact__blok strong{font-weight:600;font-size:1.05rem;color:var(--wit)}
.gebied{font-size:.95rem;color:var(--op-zwart)}
.gebied b{color:var(--wit);font-weight:600}

section[id],form[id]{scroll-margin-top:calc(var(--balk) + 20px)}

form{display:grid;gap:12px}
.form__kop{font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--wit);margin-bottom:4px}
label{display:grid;gap:6px;font-size:.86rem;letter-spacing:.01em;font-weight:600;color:var(--op-zwart-zacht)}
input,textarea,select{
  font-family:var(--tekst);font-size:1rem;color:var(--wit);
  background:#111;border:1px solid var(--grafiet);border-radius:var(--rond-s);
  padding:13px 15px;width:100%;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--wit)}
textarea{min-height:96px;resize:vertical}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a9a9a'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:20px;padding-right:40px;
}
select:invalid{color:var(--op-zwart-zacht)}
select option{background:#111;color:var(--wit)}
.veld--bestand .veld__kop{display:block}
.veld--bestand em{font-style:normal;font-weight:400;color:#858585}
input[type=file]{padding:10px 12px;cursor:pointer;font-size:.9rem;color:var(--op-zwart)}
input[type=file]::file-selector-button{
  font-family:var(--tekst);font-size:.82rem;font-weight:600;
  color:var(--wit);background:transparent;border:1px solid var(--grafiet);border-radius:999px;
  padding:8px 16px;margin-right:14px;cursor:pointer;transition:border-color .15s;
}
input[type=file]:hover::file-selector-button{border-color:var(--wit)}
.form__klein{font-size:.82rem;line-height:1.5;color:#858585;margin:-4px 0 0;font-weight:400}
/* dezelfde kleine regel, maar bovenaan het formulier onder de kop. Op de
   slotpagina staat daar "staat u nu buiten, bel dan" */
.form__klein--boven{margin:2px 0 18px;color:var(--op-zwart)}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .knop{justify-content:center}

/* ---------- voet ---------- */
.voet{background:var(--zwart);color:var(--op-zwart-zacht);border-top:1px solid var(--grafiet);padding:46px 0 36px;font-size:.88rem}
.voet__top{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.voet img{height:46px;width:auto}
.voet a{color:var(--op-zwart);text-decoration:none}
.voet a:hover{color:var(--wit)}
.voet__onder{border-top:1px solid var(--grafiet);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.82rem}

/* ---------- projecten ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter{
  font-family:var(--tekst);font-size:.86rem;font-weight:600;cursor:pointer;
  padding:10px 20px;border:1px solid var(--lijn);border-radius:999px;background:var(--wit);color:var(--grafiet);
}
.filter:hover{border-color:var(--grafiet)}
.filter[aria-pressed=true]{background:var(--grafiet);color:var(--wit);border-color:var(--grafiet)}
.galerij{columns:3 300px;column-gap:14px}
.galerij figure{margin:0 0 14px;break-inside:avoid;position:relative;background:var(--lichtgrijs);border-radius:var(--rond-m);overflow:hidden}
.galerij img{width:100%;height:auto;cursor:zoom-in}
.galerij figcaption{
  position:absolute;inset:auto 0 0 0;padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
  color:var(--wit);font-size:.88rem;opacity:0;transition:opacity .2s;pointer-events:none;
}
.galerij figure:hover figcaption,.galerij figure:focus-within figcaption{opacity:1}
.galerij figure[hidden]{display:none}

/* ---------- foto schermvullend ---------- */
/* Eén venster voor alle foto's op de site: de dienstkaarten, het mozaiek bij
   ons werk, de foto bij over ons en de galerij op projecten. Beschrijving
   eronder, pijlen om door de reeks te lopen. */
.licht{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,26px);padding:clamp(54px,6vw,72px) clamp(16px,6vw,86px);
  background:rgba(0,0,0,.94);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
}
.licht.is-aan{opacity:1;visibility:visible}
.licht img{
  max-width:100%;max-height:min(70vh,760px);width:auto;height:auto;
  border-radius:var(--rond-m);box-shadow:0 40px 90px -36px rgba(0,0,0,.9);
}
.licht__bij{max-width:60ch;text-align:center;color:var(--wit)}
.licht__bij h3{font-size:1.6rem;margin-bottom:8px;color:var(--wit)}
.licht__bij p{font-size:1rem;color:var(--op-zwart);margin:0}
.licht__tel{display:block;margin-top:10px;font-size:.84rem;color:var(--op-zwart-zacht)}
.licht__sluit,.licht__pijl{
  position:absolute;z-index:1;cursor:pointer;
  display:grid;place-items:center;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:var(--wit);
  transition:background .15s,border-color .15s;
}
.licht__sluit:hover,.licht__pijl:hover{background:rgba(255,255,255,.24);border-color:var(--wit)}
.licht__sluit{top:16px;right:16px;width:46px;height:46px}
.licht__pijl{top:50%;transform:translateY(-50%);width:50px;height:50px}
.licht__pijl--terug{left:14px}
.licht__pijl--verder{right:14px}
.licht__sluit svg,.licht__pijl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.licht-aan{overflow:hidden}

/* ---------- cookiemelding ---------- */
.koek{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  max-width:720px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;justify-content:space-between;
  background:var(--wit);color:var(--zwart);
  border:1px solid var(--lijn);border-radius:var(--rond-m);
  padding:18px 22px;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.75);
  transform:translateY(calc(100% + 24px));transition:transform .35s ease;
}
.koek.is-aan{transform:none}
.koek p{margin:0;font-size:.92rem;line-height:1.55;flex:1 1 300px;color:var(--grafiet)}
.koek b{color:var(--zwart);font-weight:600}
.koek a{color:var(--zwart)}
.koek .knop{padding:12px 24px;font-size:.9rem}
/* zolang de melding staat schuift de zwevende WhatsApp-knop erboven */
.koek.is-aan~.zweef{bottom:calc(32px + var(--koek-h,96px))}

/* ---------- plaatspagina's ---------- */
.lok{
  background:var(--zwart);color:var(--wit);
  padding:clamp(40px,4.4vw,64px) 0 clamp(46px,5vw,72px);
}
.lok__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,58px);align-items:center}
.lok h1{margin-bottom:18px}
.lok__lood{font-size:1.1rem;color:var(--op-zwart);max-width:48ch;margin-bottom:26px}
.form--kaart{
  background:#0c0c0c;border:1px solid var(--grafiet);border-radius:var(--rond-l);
  padding:clamp(22px,3vw,30px);
}
/* De slotpagina draagt hier een foto en geen formulier (verzoek Armando
   07-10-2026: die pagina is voor spoed, dan bel je). height:auto is nodig,
   het height-attribuut in het HTML gaat anders voor op aspect-ratio. */
.lok__beeld img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--rond-l);
}
/* zelfde grens als waarop .lok__grid naar één kolom valt */
@media (max-width:980px){.lok__beeld img{aspect-ratio:4/3}}

/* ---------- spoed (alleen de slotpagina) ----------
   Die pagina is er vooral voor spoed (verzoek Armando 07-10-2026): iemand
   staat buiten en zoekt op zijn telefoon. Daarom één opvallende strook in de
   hero met het nummer erin, en een eigen sectie die uitlegt hoe het gaat.
   Wat er bewust niet staat: een aanrijtijd, en geen avond- of weekendbelofte.
   Dat heeft Robbin nooit gezegd. */
.spoed{
  display:flex;gap:16px;align-items:flex-start;
  margin:26px 0 0;padding:18px 20px;
  background:#101010;border:1px solid var(--grafiet);
  border-left:3px solid var(--wit);border-radius:var(--rond-m);
}
.spoed__tegel{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.spoed__tegel svg{
  width:30px;height:30px;fill:none;stroke:var(--wit);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.spoed b{display:block;font-size:1.05rem;color:var(--wit);line-height:1.35}
.spoed b a{text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.45)}
.spoed b a:hover{border-bottom-color:var(--wit)}
.spoed p{margin:7px 0 0;font-size:.93rem;color:var(--op-zwart)}

/* De twee citaten onder de spoedsectie. Dit zijn letterlijke beoordelingen
   van Werkspot over snel reageren en dezelfde dag komen, geen belofte van
   ons. Daarom staat de bron er onder en niet alleen de tekst. */
.citaten{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
@media(max-width:700px){.citaten{grid-template-columns:1fr}}
.citaat{
  /* blockquote krijgt van de browser 40px marge links en rechts; die duwt de
     twee kaarten naar binnen en dan staan ze niet meer gelijk met het raster
     erboven */
  margin:0;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond-m);
  padding:20px 22px;
}
.citaat p{margin:0 0 12px;font-size:1rem;font-weight:600;line-height:1.5}
.citaat small{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--grafiet)}
.citaat small svg{width:15px;height:15px;flex:none;fill:var(--grafiet)}
/* de nuance onder de spoedsectie: wel of het vandaag lukt, geen vaste tijd */
.spoed__nuance{margin-top:22px;font-size:.93rem;color:var(--grafiet)}

.plaatsen{display:flex;flex-wrap:wrap;gap:10px}
.plaatsen a{
  display:inline-block;text-decoration:none;font-size:.88rem;font-weight:600;
  padding:9px 18px;border:1px solid var(--grafiet);border-radius:999px;
  color:var(--op-zwart);transition:border-color .15s,color .15s;
}
.plaatsen a:hover{border-color:var(--wit);color:var(--wit)}
.voet__plaatsen{margin-bottom:26px}
.voet__plaatsen p{margin:0 0 14px;font-size:.88rem;color:var(--op-zwart-zacht)}
/* losse regel onder de plaatsenpillen, naar de slotpagina */
.voet__los{margin:16px 0 0}
.voet__los a{text-decoration:underline;text-underline-offset:3px}

/* ================================================================
   MIDNIGHT CLEAN - zelfde opmaak als Midnight, andere pagina-opbouw
   (verzoek Armando 06-10-2026). Eén set secties voor drie stijlen,
   dus hier wordt verborgen en verschoven, niet uit het HTML gehaald.
   ================================================================ */

/* één foto in de hero in plaats van een reeks. De carrousel in site.js zet
   zichzelf stil zodra deze stijl aan staat; deze regels houden de eerste foto
   hoe dan ook in beeld, ook als iemand midden in een overgang wisselt. */
[data-thema=midnight-clean] .dia__foto{display:none}
[data-thema=midnight-clean] .dia__foto:first-of-type{
  display:block;opacity:1;z-index:2;animation:none;transform:none;
}
[data-thema=midnight-clean] .dia__stippen,
[data-thema=midnight-clean] .dia__pijl{display:none}

/* de schuine grafietkaart achter de herofoto valt weg; op de telefoon stak hij
   onder de foto uit als een los grijs vlak (verzoek Armando 06-10-2026) */
[data-thema=midnight-clean] .hero__beeld::after{display:none}
[data-thema=midnight-clean] .hero__beeld{padding-bottom:0}

/* 'Woning, bedrijfspand of opslagruimte' valt weg; die drie staan ook in de
   hero en in het offerteformulier */
[data-thema=midnight-clean] #inzetbaar{display:none}

/* Het tweede contactblok hoort alleen bij Midnight clean; in Midnight en
   Carbon staat contact één keer onderaan. */
#contact-boven{display:none}
[data-thema=midnight-clean] #contact-boven{display:block}

/* Volgorde: hero, wat we doen, contact, wat klanten zeggen, werkwijze,
   ons werk, contact. Met order in plaats van losse HTML, zo blijft tekst
   bewerken één plek. De vlakken moeten mee, anders botsen gelijke kleuren:
   diensten en beoordelingen zijn allebei grijs, dus diensten wordt wit
   (beoordelingen moet grijs blijven, anders vallen de witte reviewkaarten weg),
   werkwijze staat achter beoordelingen en wordt zwart, en ons werk staat
   tussen zwart en zwart in en gaat daarom naar lichtgrijs. */
[data-thema=midnight-clean] main{display:flex;flex-direction:column}
[data-thema=midnight-clean] .hero{order:1}
/* Opgetilde kaarten op zwart: de keuze uit de proefopstelling van 06-10-2026
   (Armando koos optie 2 uit drie varianten). Negen zwarte kaarten op lichtgrijs
   lazen als gaten in de pagina; het vlak is nu zelf zwart en de kaart net iets
   lichter met een rand, dus ze liggen erop in plaats van erin. Dit komt dicht
   bij Carbon; het verschil tussen de twee is hier nog de kleur van het icoon. */
[data-thema=midnight-clean] #diensten{order:2;background:var(--zwart);color:var(--wit)}
[data-thema=midnight-clean] #diensten h2{color:var(--wit)}
[data-thema=midnight-clean] #diensten .lood{color:var(--op-zwart)}
[data-thema=midnight-clean] .dienst{
  background:#141414;color:var(--wit);
  border:1px solid rgba(255,255,255,.14);
}
[data-thema=midnight-clean] .dienst p{color:var(--op-zwart)}
[data-thema=midnight-clean] .dienst:hover{
  transform:translateY(-3px);border-color:var(--grafiet);
  box-shadow:0 26px 48px -26px rgba(0,0,0,.75);
}
/* Icoon in plaats van foto, zoals in Carbon en naar het voorbeeld van MHA
   (verzoek Armando 06-10-2026). Het icoon is wit en niet goud of oranje: deze
   stijl is strikt zwart-wit, dat zijn de logokleuren van RH. Zonder foto is er
   niets te vergroten, dus de kaart is hier ook geen knop meer (zie site.js). */
[data-thema=midnight-clean] .dienst{padding:26px 26px 28px;cursor:default}
[data-thema=midnight-clean] .dienst img{display:none}
[data-thema=midnight-clean] .dienst__tekst{padding:0}
[data-thema=midnight-clean] .dienst h3{margin-bottom:10px;font-size:1.3rem}
[data-thema=midnight-clean] .dienst .tegel{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;margin-bottom:20px;
}
[data-thema=midnight-clean] .dienst .tegel svg{
  width:32px;height:32px;
  fill:none;stroke:var(--wit);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Verzoek Armando 06-10-2026: in clean gaat het grafieten slotblok eruit. De
   zin 'Vrijwel alles is bespreekbaar' staat nu onder de kop van het
   contactblok dat er direct onder zit. */
[data-thema=midnight-clean] .slot{display:none}
/* Twee varianten van de inleidende zin onder de kop: de standaardzin voor
   Midnight en Carbon, de bespreekbaar-zin voor clean. */
.lood--clean{display:none}
[data-thema=midnight-clean] .lood--clean{display:block}
[data-thema=midnight-clean] .lood--standaard{display:none}

/* Verzoek Armando 06-10-2026: geen haarlijn tussen diensten en contact. De twee
   zwarte vlakken lopen door; de scheiding komt van de witruimte, niet van een lijn. */
[data-thema=midnight-clean] #contact-boven{order:3}
[data-thema=midnight-clean] #beoordelingen{order:4}
[data-thema=midnight-clean] #werkwijze{order:5}
[data-thema=midnight-clean] #ons-werk{order:6}
[data-thema=midnight-clean] #contact{order:7}

/* Werkwijze is in clean een zwart vlak. Geen kaartraster met haarlijnen meer
   maar de MHA-opzet: ronde nummers op een doorlopende lijn, tekst eronder. */
[data-thema=midnight-clean] #werkwijze{background:var(--zwart);color:var(--wit)}
/* Verzoek Armando 06-10-2026: in clean alleen de nummers en de staptitels.
   De ondertitel en de uitleg per stap eruit, die staan verderop toch al. */
[data-thema=midnight-clean] #werkwijze .lood,
[data-thema=midnight-clean] #werkwijze .stap p{display:none}
[data-thema=midnight-clean] #werkwijze .stap h3{margin-bottom:0}
/* vaste vier kolommen, geen auto-fit: zo wikkelt de rij nergens halverwege en
   loopt de lijn altijd door alle vier de nummers */
[data-thema=midnight-clean] #werkwijze .stappen{
  grid-template-columns:repeat(4,1fr);gap:28px;
  background:none;border:0;border-radius:0;overflow:visible;
}
[data-thema=midnight-clean] #werkwijze .stap{background:none;padding:72px 0 0}
[data-thema=midnight-clean] #werkwijze .stap::before{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:999px;
  display:grid;place-items:center;margin:0;z-index:1;
  background:var(--zwart);border:1px solid rgba(255,255,255,.32);
  font-size:1.3rem;color:var(--wit);
}
/* de doorlopende lijn waar de nummers op staan. Geen z-index:-1 zoals in
   verdwijnen. De cirkel dekt hem af met z-index 1. */
[data-thema=midnight-clean] #werkwijze .stap::after{
  content:"";position:absolute;left:0;right:-28px;top:24px;height:1px;
  background:var(--grafiet);
}
[data-thema=midnight-clean] #werkwijze .stap:last-child::after{right:0}

/* 'Bekijk ons werk' staat tussen het zwarte werkwijzeblok en het zwarte
   contactblok. Zwart op zwart zou in elkaar overlopen, dus krijgt het hier de
   lichte huid: grijs vlak, donkere tekst, donkere knop. */
[data-thema=midnight-clean] #ons-werk{background:var(--lichtgrijs);color:var(--zwart)}
[data-thema=midnight-clean] #ons-werk p,
[data-thema=midnight-clean] #ons-werk .lood{color:var(--grafiet)}
[data-thema=midnight-clean] #ons-werk .knop--licht{
  background:var(--zwart);color:var(--wit);border-color:var(--zwart);
}
[data-thema=midnight-clean] #ons-werk .knop--licht:hover{
  background:var(--grafiet);border-color:var(--grafiet);color:var(--wit);
}
/* het menu volgt de pagina */
[data-thema=midnight-clean] .balk nav a[href="#diensten"]{order:1}
[data-thema=midnight-clean] .balk nav a[href="#beoordelingen"]{order:2}
[data-thema=midnight-clean] .balk nav a[href="#werkwijze"]{order:3}
[data-thema=midnight-clean] .balk nav a[href="/projecten/"]{order:4}
[data-thema=midnight-clean] .balk nav .knop{order:5}

/* ---------- responsief ---------- */

/* Met drie stijlen past de pil op geen enkel scherm naast het menu. De balk
   loopt niet over, want de menulinks krimpen, maar dan breken ze midden in de
   tekst ("Wat / we / doen"). De inhoud is overal maximaal 1180px breed, dus
   breder scherm helpt niet. De wisselaar staat daarom altijd achter de drie
   puntjes en de menulinks breken nooit meer. */
.balk nav a:not(.knop){white-space:nowrap;flex:none}
@media (max-width:1080px){
  .balk nav{gap:18px}
  .balk nav a:not(.knop){font-size:.84rem}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;min-height:0;gap:34px}
  .hero__tekst{padding:56px 0 0}
  .hero__beeld{padding-bottom:40px}
  .dia{height:clamp(300px,58vw,420px);max-height:none}
  .hero__beeld::after{right:-10px;bottom:-10px}
  .over,.inzicht,.contact,.lok__grid{grid-template-columns:1fr}
  .ws__kop{grid-template-columns:1fr;align-items:start;gap:16px}
  .ws__nav{display:none}
  .ws__lijst{flex-wrap:nowrap}
  .review{flex-basis:min(86%,340px)}
  .inzicht__beeld{order:-1}
  /* onder 980px wikkelt de stappenrij; de lijn zou dan tussen twee rijen
     blijven hangen in plaats van ze te verbinden */
  [data-thema=midnight-clean] #werkwijze .stappen{
    grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  }
  [data-thema=midnight-clean] #werkwijze .stap::after{display:none}
}
/* De balk gaat naar zijn telefoonvorm zodra de menulinks en de belknop er niet
   meer naast passen. Dat was ingesteld op 720px, maar gemeten liep de balk op
   780px al 197px over en op 900px 77px: op een tablet schoof de hele pagina
   dus zijwaarts. Vanaf 860px past het weer. De inhoudsregels hieronder blijven
   op 720px staan, die hebben hier niets mee te maken. */
@media (max-width:860px){
  .balk nav{display:none}
  .balk__mob{display:inline-flex;margin-left:auto}
  .balk .binnen{height:66px;gap:0;position:relative}
  .balk__logo img{height:29px}
  :root{--balk:66px}
}
@media (max-width:720px){
  .dienst h3{font-size:1.35rem}
  .over__beeld img{height:280px}
  .feiten{grid-template-columns:1fr 1fr}
  .feiten div:last-child{grid-column:1/-1}
  .tweekolom{grid-template-columns:1fr}
  .slot{flex-direction:column;align-items:flex-start}
  .galerij{columns:1}
  /* op de telefoon alleen een groene bel rechtsonder: een pil over de hele
     breedte legt zich over de inhoud en maakt het onderaan te druk */
  .zweef{right:16px;bottom:16px;left:auto;width:56px;height:56px;padding:0;gap:0}
  .zweef__woord{display:none}
  .zweef svg{width:27px;height:27px}
  /* Op de telefoon staat de inleiding niet meer in de hero: vier regels tekst
     duwen de foto onder het scherm. De drie vinkjes nemen die plek in, want
     die zeggen in drie regels hetzelfde. De inleiding staat verderop nog. */
  .hero__lood{display:none}
  .hero__tekst{padding:36px 0 0}
  .hero__tekst>h1{order:1;margin-bottom:20px}
  .hero__tekst>.bewijs{order:2;flex-direction:column;gap:11px;margin:0 0 24px}
  .hero__tekst>.knoppen{order:3}
  .hero__tekst>.hero__cijfer{order:4;margin-top:18px}
  /* alles in de hero staat links; die regel hoort op dezelfde lijn als de
     knoppen erboven, anders leest hij als iets dat er los onder hangt */
  .hero__cijfer{align-self:flex-start;justify-content:flex-start;gap:6px 8px}
  .ws__mark{height:13px;padding:4px 9px}
  /* het logo valt hier op een eigen regel; dan eindigt de regel erboven liever
     op beoordelingen dan op het losse woordje op */
  .tel__op{display:none}
  /* vegen werkt, de pijlen zouden de halve foto afdekken */
  .dia__pijl{display:none}
  .licht__pijl{width:42px;height:42px}
  .licht__pijl--terug{left:8px}
  .licht__pijl--verder{right:8px}
  .licht{padding:62px 14px 20px}
  .licht img{max-height:56vh}
  .koek{left:10px;right:10px;bottom:10px;padding:16px 18px;gap:12px}
  .koek .knop{width:100%;justify-content:center}
}
@media (max-width:400px){
  /* kleinste telefoons: het woord Bellen eruit, de knop wordt een rond
     telefoonicoon. Het logo blijft op volle hoogte en dus op de lijn. */
  .balk__logo img{height:26px}
  .balk__bel-kort{display:block}
  .balk__bel-lang{display:none}
  .balk__mob{padding:11px 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dia__foto.is-aan,.dia__foto.is-aan.dia--uit{animation:none;transform:none}
  .dia__foto{transition-duration:.2s}
}