/* ====================================================================
   VB ENERGY — VORMGEVINGSLAAG v3.2  "Vakmanschap, gemeten"
   ====================================================================
   vb.css is de opbouw van v3.1 en blijft ongewijzigd: dezelfde HTML,
   dezelfde klassen, hetzelfde gedrag. Dit bestand is de nieuwe
   vormgeving en wordt er ná geladen. Het staat bewust apart, zodat je
   in één bestand kunt zien wat er aan het uiterlijk veranderd is - en
   zodat je het desnoods in zijn geheel kunt weghalen zonder dat de
   site stukgaat.

   Drie dingen moesten anders:
     1. Het oogde als een nette sjabloon, niet als een eigen merk.
     2. Er zat beweging op, maar zonder één gemeenschappelijke taal.
     3. Op een telefoon voelde het zwaar aan.

   De aanpak: één maatsysteem dat met het scherm meegroeit, veel meer
   witruimte, haarlijnen in plaats van kaders, goud als precisie-accent
   in plaats van als kleurvlak, en één enkele bewegingscurve voor de
   hele site.
   ==================================================================== */


/* --- 1. Bouwstenen --------------------------------------------------
   Eén versnellingscurve voor alles wat beweegt. Dat is het verschil
   tussen "er zit animatie op" en "het voelt als één geheel": zodra
   elke overgang dezelfde curve volgt, herkent het oog een ritme.
   --soepel loopt traag uit en is voor alles wat binnenkomt of groeit.
   --kort is voor knoppen en hover: die moeten meteen antwoorden. */
:root{
  --soepel:cubic-bezier(.22,.61,.24,1);
  --kort:cubic-bezier(.33,1,.68,1);

  /* Verticaal ritme. Groeit mee met de schermbreedte, met een boven- en
     ondergrens - zo staat een sectie op een telefoon niet belachelijk
     ver uit elkaar en op een breed scherm niet opeengepakt. */
  --ruimte-sectie:clamp(72px,8.5vw,132px);

  /* Extra tinten bovenop het bestaande logo-palet. Geen nieuwe kleuren:
     dezelfde marine en hetzelfde goud, alleen dieper en fijner. */
  --ink-diep:#04091F;
  --goud-lijn:rgba(240,149,6,0.45);
  --haarlijn:rgba(9,34,73,0.11);
  --haarlijn-licht:rgba(255,255,255,0.10);
}


/* --- 2. Maatsysteem voor tekst --------------------------------------
   De oude titels stonden op vaste maten (44px, 34px, 32px). Op een
   groot scherm oogde dat klein en braaf, op een telefoon net te groot.
   clamp() lost dat in één regel op: minimum, meegroeiend, maximum.
   De letterafstand wordt negatiever naarmate de letters groter worden -
   dat is wat een titel duur doet ogen in plaats van uitgerekt. */
h1,h2,h3{text-wrap:balance;}

.hero h1{
  font-size:clamp(35px,5.2vw,66px);
  line-height:1.03;
  letter-spacing:-0.035em;
}
.hero p.lead{
  font-size:clamp(16.5px,1.35vw,19.5px);
  line-height:1.62;
  color:#C4D4EC;
  max-width:36ch;
  margin:26px 0 36px;
}
.intro h2,.sec-head h2,.regio h2,.reviews h2,.faq h2,.quote-section h2,
.subpage h1,.subpage h2{
  font-size:clamp(27px,3.4vw,42px);
  line-height:1.12;
  letter-spacing:-0.028em;
}
/* De uitzonderingen die klein MOETEN blijven, ook al zijn het h2's:
   bovenschriften en fotobijschriften. Die staan hierboven mee in de
   selector, dus zetten we ze hier terug op hun eigen maat. */
.subpage h2.kicker,h2.kicker,
.subpage h2.gallery-label,h2.gallery-label{
  font-size:11.5px;line-height:1.5;
}
.subpage .desc,.intro-body p{
  font-size:clamp(15.5px,1.15vw,17px);
  line-height:1.75;
}


/* --- 3. Het sectiemerk ----------------------------------------------
   Het bovenschrift boven elke sectie was een gewoon blauw woordje. Nu
   krijgt het een gouden haarlijn ervoor. Dat ene streepje komt over de
   hele site terug en knoopt de pagina's aan elkaar - goedkoper dan
   eender welke versiering, en het valt pas op als je ernaar kijkt. */
main{counter-reset:sectiemerk;}
.kicker,h2.kicker,.subpage h2.kicker{
  display:flex;align-items:center;gap:12px;
  letter-spacing:0.14em;
  margin-bottom:18px;
}
/* Het volgnummer. Twee cijfers, dus 01 en niet 1: dat is wat het als een
   genummerd hoofdstuk laat lezen in plaats van als een opsomming.
   Alleen het opschrift dat rechtstreeks in .wrap staat, is het opschrift
   van de sectie zelf. Een opschrift dat dieper in een blok zit - "Wat er
   daarna gebeurt", binnen het offerteblok - hoort bij dat blok en krijgt
   dus geen eigen hoofdstuknummer. Anders telt de site door binnen één
   sectie en klopt de nummering niet meer. */
.wrap > .kicker{counter-increment:sectiemerk;}
.wrap > .kicker::before{
  content:counter(sectiemerk,decimal-leading-zero);
  order:-2;flex:none;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
  opacity:0.85;
}
/* Het streepje tussen het nummer en het opschrift. In de bronvolgorde
   komt ::after achteraan; met order zetten we het op zijn plaats zonder
   dat er een extra element in de HTML moet. */
.kicker::after{
  content:"";order:-1;width:26px;height:1.5px;flex:none;
  background:linear-gradient(90deg,var(--gold),var(--goud-lijn));
  border-radius:2px;
}
/* Op een donkere sectie moet hetzelfde streepje warmer zijn, anders
   verdwijnt het in de marine. */
.services .kicker,.hero .kicker{color:var(--gold-soft);}

section{padding:var(--ruimte-sectie) 0;}
.wrap{max-width:1200px;}

/* Een haarlijn tussen twee lichte secties in plaats van een kleurvlak.
   Je ziet dat er een nieuw onderwerp begint zonder dat er een blok
   omheen staat. */
.regio,.quote-section,.why{border-top:1px solid var(--haarlijn);}


/* --- 4. Knoppen -----------------------------------------------------
   De gouden knop was een plat vlak. Nu schuift er bij hover een lichte
   veeg overheen: één ::before die van links naar rechts wegschuift. Dat
   is één transform op één laag - het kost de browser niets en het geeft
   de knop gewicht. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:12px;padding:15px 26px;
  letter-spacing:-0.005em;
  transition:transform .22s var(--kort),box-shadow .22s var(--kort),
             border-color .22s var(--kort),background-color .22s var(--kort);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);
  transform:translateX(-105%);
  transition:transform .55s var(--soepel);
}
.btn:hover::before{transform:translateX(105%);}
.btn-gold{box-shadow:0 1px 0 rgba(255,255,255,0.35) inset,
                    0 8px 22px rgba(240,149,6,0.22);}
.btn-gold:hover{background:var(--gold);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset,0 14px 30px rgba(240,149,6,0.30);}
.btn-gold:active{transform:translateY(0);}
.btn-outline{border-color:rgba(255,255,255,0.26);}
.btn-outline:hover{transform:translateY(-2px);border-color:rgba(255,255,255,0.60);}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* Aanraakschermen kennen geen hover: daar is de veeg zinloos en het
   optillen zelfs storend, want het gebeurt pas ná de tik. */
@media(hover:none){
  .btn::before{display:none;}
  .btn-gold:hover,.btn-outline:hover{transform:none;}
}


/* --- 5. De hero -----------------------------------------------------
   Was: één verloop van linksboven naar het midden. Nu drie lagen over
   elkaar: een diepe marine bodem, twee zachte lichtvlekken, en een heel
   fijn technisch raster. Dat raster bestaat uit twee repeating-gradients
   en dus niet uit een afbeelding: het geeft de bovenkant van de pagina
   diepte zonder dat er één byte extra over de lijn moet. */
.hero{
  background:
    radial-gradient(760px 420px at 12% -6%,rgba(22,109,244,0.20),transparent 70%),
    radial-gradient(620px 400px at 88% 8%,rgba(240,149,6,0.10),transparent 70%),
    linear-gradient(175deg,#0A1C3D 0%,var(--ink-diep) 62%);
  padding:clamp(52px,6.5vw,96px) 0 clamp(40px,5vw,64px);
}
/* z-index op beide: een absoluut geplaatst ::before wordt anders ná de
   gewone inhoud getekend, en dan ligt dat raster over de titel in plaats
   van erachter. */
.hero .wrap{position:relative;z-index:1;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,0.045) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(255,255,255,0.032) 0 1px,transparent 1px 92px);
  /* Het raster mag alleen linksboven zichtbaar zijn en moet naar de
     tekst toe uitdoven, anders leest de lead over een ruitjesblad. */
  -webkit-mask-image:radial-gradient(900px 520px at 8% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(900px 520px at 8% 0%,#000 0%,transparent 72%);
}
.hero-grid{gap:clamp(36px,5vw,72px);}
/* Het beklemtoonde woord in de titel loopt van het koele blauw van de
   airco naar het goud van het logo: koelen én verwarmen, in één woord. */
.hero h1 em{
  background:linear-gradient(96deg,var(--frost) 8%,#A9C9F5 52%,var(--gold-soft) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.eyebrow{
  border-color:var(--goud-lijn);
  background:rgba(240,149,6,0.07);
  letter-spacing:0.06em;
  padding:7px 15px;
}
.hero-contact{color:#8FA6C6;}

/* De cijferstrook onderaan de hero. Was: vier kolommen tekst onder een
   lijn. Nu staan de cijfers groot met een haarlijn tússen de kolommen
   in plaats van alleen erboven - het leest als een meetstrook, wat past
   bij het vak. */
.stat-strip{
  border-top:1px solid var(--haarlijn-licht);
  margin-top:clamp(36px,4vw,56px);padding-top:26px;
}
.stat{border-left:1px solid var(--haarlijn-licht);padding:0 20px;}
.stat:first-child{border-left:0;padding-left:0;}
/* Op een telefoon staan de drie cijfers naast elkaar in 375 pixels. Daar
   is 20 pixels ruimte aan weerszijden te veel: dan breekt "GOOGLE-REVIEWS"
   middenin een woord af. */
@media(max-width:560px){ .stat{padding:0 10px;} }
.stat .num{
  font-size:clamp(26px,2.6vw,34px);letter-spacing:-0.03em;line-height:1;
  /* Cijfers even breed houden, anders springt het getal tijdens het
     omhoogtellen alle kanten op. */
  font-variant-numeric:tabular-nums;
}
.stat .lbl{font-size:11px;letter-spacing:0.12em;color:#8199BB;margin-top:8px;}

/* De airco-demo krijgt een echte rand met licht erop in plaats van een
   vlakke doos. */
.unit-demo{
  border-radius:24px;
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 30px 70px rgba(0,0,0,0.42),0 1px 0 rgba(255,255,255,0.09) inset;
}


/* --- 6. Panelen -----------------------------------------------------
   Overal in de site stonden losse blokken met elk hun eigen rand,
   ronding en schaduw. Ze krijgen nu allemaal dezelfde behandeling: wit,
   één haarlijn, dezelfde ronding, en pas bij hover een lichte
   verheffing. Eén vormtaal in plaats van acht. */
.feature-item,.gs-card,.model-card,.verloop-stap,.warmte,.splitdemo,
.quote-form,.why-item,.verder-kaart,.rz-kaart,.gemeente-kaart{
  border-radius:18px;
  border:1px solid var(--haarlijn);
}
.feature-item,.gs-card,.model-card,.verloop-stap,.verder-kaart{
  transition:transform .3s var(--soepel),border-color .3s var(--soepel),
             box-shadow .3s var(--soepel);
}
@media(hover:hover){
  .feature-item:hover,.gs-card:hover,.model-card:hover,
  .verloop-stap:hover,.verder-kaart:hover{
    transform:translateY(-3px);
    border-color:rgba(22,109,244,0.28);
    box-shadow:0 14px 34px rgba(9,34,73,0.09);
  }
}

/* De dienstenkaarten op de donkere sectie. Was: een gevulde blauwe doos
   die bij hover omhoogschoof. Nu een bijna doorzichtig paneel met een
   gouden haarlijn die vanuit het midden opengaat bij hover. Dat is
   hetzelfde streepje als bij het sectiemerk - herhaling maakt merk. */
.services{background:linear-gradient(180deg,var(--ink) 0%,#061431 100%);}
.scard{
  background:rgba(255,255,255,0.035);
  border:1px solid var(--haarlijn-licht);
  border-radius:20px;padding:34px 30px 30px;
  position:relative;overflow:hidden;
  transition:transform .35s var(--soepel),background .35s var(--soepel),
             border-color .35s var(--soepel);
}
.scard::after{
  content:"";position:absolute;left:50%;top:0;height:2px;width:0;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width .45s var(--soepel);
}
.scard:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.18);
}
.scard:hover::after{width:80%;}
.scard h3{font-size:21px;letter-spacing:-0.02em;}
.scard .go{
  display:inline-flex;align-items:center;gap:7px;
  transition:gap .25s var(--kort),color .25s var(--kort);
}
.scard:hover .go{gap:12px;color:var(--gold-soft);}


/* --- 7. Waarom-blok, gemeentepillen, reviews ------------------------ */
.why-item{padding:26px 24px;background:#fff;}
.why-item h3{font-size:18px;letter-spacing:-0.02em;margin-bottom:8px;}

.pill{
  border-radius:10px;font-size:12.5px;
  border-color:var(--haarlijn);
  transition:transform .2s var(--kort),border-color .2s var(--kort),
             color .2s var(--kort);
}
@media(hover:hover){
  .pill:hover{transform:translateY(-2px);border-color:var(--accent);}
}

/* De reviewband liep tot tegen de rand van het scherm en werd daar
   abrupt afgeknipt. Met een masker aan beide kanten schuift ze nu het
   beeld in en uit. */
.review-grid{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}


/* --- 8. FAQ ---------------------------------------------------------
   Grotere vraagtekst, meer lucht, en het plusje draait naar een kruisje
   in plaats van gewoon te kantelen. */
.faq-q{font-size:clamp(16px,1.35vw,18.5px);letter-spacing:-0.015em;}
.faq-item{border-bottom:1px solid var(--haarlijn);}
.faq-q .plus{
  transition:transform .3s var(--soepel),color .3s var(--soepel);
  font-size:22px;
}
.faq-item[open] .faq-q .plus{transform:rotate(135deg);color:var(--gold);}


/* --- 9. Voettekst ---------------------------------------------------
   Een gouden haarlijn bovenaan sluit de pagina af. */
footer{
  background:var(--ink-diep);
  border-top:1px solid var(--goud-lijn);
}


/* --- 9b. Kleine leesbaarheidscorrecties -----------------------------
   Een handvol labels stond op 11 pixels. Dat is klein genoeg om te
   moeten turen, zeker voor wie de veertig voorbij is - en dat is een
   groot deel van wie een airco of een elektriciteitskast laat plaatsen.
   Twaalf en een halve pixel leest merkbaar rustiger en verandert niets
   aan de opbouw.
   De knop eronder mat 43 pixels hoog; 44 is de maat waarop een duim
   betrouwbaar raakt. */
.rz-tag,.qf-inst-sub,.qf-roomblock-sublabel,.sd-tag{font-size:12.5px;}
.sim-knop{min-height:44px;}

/* --- 9c. Uit de keuring van alle schermformaten -----------------------
   Nagemeten op 320, 390, 412, 768, 1024, 1366 en 1920 pixels breed. Er
   schuift nergens iets zijwaarts en de bel- en mailknoppen staan overal,
   maar drie dingen bleven onder de maat. */

/* De knoppen Koelt en Verwarmt in de hero waren 35 pixels hoog. Dat is de
   leukste knop van de hele site en juist die was te klein om betrouwbaar
   met een duim te raken; 44 is de maat waarop dat wel lukt. De letters
   blijven even groot, alleen het vlak eromheen groeit. */
.mode-btn{min-height:44px;display:inline-flex;align-items:center;gap:7px;}

/* Het kruimelpad ("Start › Airco") stond op 16 pixels hoog. De letters
   mogen klein blijven - het is geen hoofdnavigatie - maar het aanraakvlak
   moet groter. Extra ruimte boven en onder, met een negatieve marge zodat
   de regel zelf niet hoger wordt en er in de opmaak niets verschuift. */
.kruimel a{
  display:inline-block;
  padding:13px 4px;
  margin:-13px 0;
}

/* "Zaakvoerder · erkend koeltechnicus" stond op 11,5 pixels. Dat is de
   regel die je vak en je erkenning benoemt, pal onder je foto - dus net
   de regel die gelezen moet worden. */
/* .creds-box .cb-role in vb.css is specifieker dan .cb-role alleen en won,
   dus staat de houder hier mee in de selector. */
.creds-box .cb-role{font-size:12.5px;}

/* Het opschrift boven de split-tekening op de aircopagina stond ook op 11,5. */
.splitdemo .sd-tag{font-size:12.5px;}

/* De privacylink in de cookiemelding stond op 23 pixels hoog, naast een
   knop van 48. Dat is precies het soort mismatch waardoor iemand op een
   telefoon net ernaast tikt en ongewild de melding wegklikt. */
.cookieregel-rij a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px;
}

/* ====================================================================
   10. HET BEWEGINGSSYSTEEM
   ====================================================================
   Regel één: alleen transform en opacity. Dat zijn de enige twee dingen
   die een browser kan animeren zonder de pagina opnieuw te moeten
   berekenen. Alles hieronder houdt zich daaraan - daarom loopt het ook
   vloeiend op een telefoon van vijf jaar oud.

   Regel twee: beweging betekent iets. Iets komt van onderaf in beeld
   omdat je naar beneden scrolt. Een foto schuift open omdat ze wordt
   onthuld. Niets beweegt "omdat het kan". */

/* Het basispatroon: opkomen van onderaf. De vertraging komt uit --i,
   een nummer dat JavaScript aan elk element in een rij meegeeft. Zo
   verschijnen vier kaarten niet als één blok maar als een golf. */
.js-anim .reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .72s var(--soepel) calc(var(--i,0) * 65ms),
             transform .72s var(--soepel) calc(var(--i,0) * 65ms);
}
.js-anim .reveal.in{opacity:1;transform:none;}

/* Een titel wordt niet ingefade maar onthuld: de regel schuift van
   onder een onzichtbare rand vandaan. Dat is de beweging uit
   drukwerk-animatie, en ze maakt een pagina meteen duurder.
   overflow:clip op de houder knipt weg wat nog onder de rand hangt. */
.js-anim .onthul{
  overflow:clip;display:block;
  /* Zonder deze twee regels knipt overflow:clip de staarten van de g,
     de j en de p eraf. De padding geeft ze ruimte, de negatieve marge
     haalt die ruimte er visueel weer af zodat de titel niet verspringt. */
  padding-bottom:0.14em;margin-bottom:-0.14em;
}
.js-anim .onthul > span{
  display:inline-block;
  transform:translate3d(0,108%,0);
  transition:transform .85s var(--soepel) calc(var(--i,0) * 90ms);
}
.js-anim .onthul.in > span{transform:none;}

/* Foto's schuiven open in plaats van te verschijnen, en schalen
   tegelijk heel licht terug. Die twee samen geven het gevoel dat er
   iets wordt wéggehaald in plaats van bijgezet. */
.js-anim img.toon-foto{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.06);
  transition:clip-path .95s var(--soepel) calc(var(--i,0) * 80ms),
             transform 1.25s var(--soepel) calc(var(--i,0) * 80ms);
}
.js-anim img.toon-foto.in{clip-path:inset(0 0 0 0);transform:none;}

/* De hero speelt af zodra de pagina er is, niet bij het scrollen: hij
   staat al in beeld. Vaste, korte vertragingen - dit is de eerste
   indruk en die mag niet slepen. */
@media(prefers-reduced-motion:no-preference){
  /* De titel staat hier bewust niet bij: die heeft zijn eigen onthulling
     per regel (zie .onthul hierboven). Twee animaties op hetzelfde
     element vechten met elkaar. */
  .js-anim .hero .eyebrow,
  .js-anim .hero p.lead,
  .js-anim .hero .btnrow,
  .js-anim .hero .hero-contact,
  .js-anim .hero .stat-strip,
  .js-anim .hero .unit-demo{
    animation:heroOp .9s var(--soepel) both;
  }
  .js-anim .hero p.lead{animation-delay:.14s;}
  .js-anim .hero .btnrow{animation-delay:.20s;}
  .js-anim .hero .hero-contact{animation-delay:.26s;}
  .js-anim .hero .stat-strip{animation-delay:.32s;}
  .js-anim .hero .unit-demo{animation-delay:.12s;animation-duration:1.1s;}
}
@keyframes heroOp{
  from{opacity:0;transform:translate3d(0,20px,0);}
  to{opacity:1;transform:none;}
}

/* Beweging die aan de scrollbalk hangt, zonder één regel JavaScript.
   view() laat de browser de animatie zelf koppelen aan hoe ver een
   element in beeld staat; dat draait op de compositor en kost dus geen
   rekentijd op de hoofddraad. Browsers die het nog niet kennen, slaan
   het hele blok over en tonen gewoon een stilstaand element - vandaar
   @supports en niet als standaardgedrag.
   Enkel op ruime schermen: op een telefoon scrolt alles snel voorbij en
   is dit vooral onrust. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:900px){
    .hero .unit-demo{
      animation:zweef linear both;
      animation-timeline:view();
      animation-range:entry 30% exit 100%;
    }
    @keyframes zweef{
      from{transform:translate3d(0,26px,0);}
      to{transform:translate3d(0,-26px,0);}
    }
    /* Het sectiemerk tekent zijn eigen streepje terwijl je erlangs
       scrolt. Klein, en precies daarom werkt het. */
    .kicker::after{
      animation:lijnGroei linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 85%;
    }
    @keyframes lijnGroei{ from{width:0;} to{width:26px;} }
  }
}


/* ====================================================================
   11. SNELHEID
   ==================================================================== */

/* Alles wat ver onder het scherm staat, hoeft de browser bij het openen
   van de pagina niet op te maken. contain-intrinsic-size vertelt hem
   ondertussen hoe hoog het ongeveer wordt, zodat de schuifbalk niet
   begint te springen.
   Niet op secties met een id: daar wordt vanuit het menu naartoe
   gesprongen, en dan moet de browser ze wél al kennen. */
.verder,.legal-overlay{
  content-visibility:auto;
  contain-intrinsic-size:auto 420px;
}

/* Doorlopende animaties die uit beeld zijn gescrold. JavaScript zet deze
   klasse erop en haalt ze er weer af; zie vb.js, onderdeel 1d. Een browser
   tekent een eindeloze animatie namelijk gewoon door wanneer ze allang
   voorbij is - batterij en rekentijd voor niets. */
.stil,.stil *{animation-play-state:paused !important;}

/* Op een telefoon is de zwevende deeltjeslaag in de hero het duurste
   wat er beweegt: tientallen elementen die elk hun eigen animatie
   draaien, elk frame opnieuw. Op klein formaat valt er nauwelijks iets
   van te zien, dus gaat ze uit. De unit zelf, de luchtstromen en de
   knop blijven. */
@media(max-width:720px){
  .unit-demo .particles{display:none;}
}

/* Zonder hover heeft een zware schaduw geen functie meer - er is niets
   dat hem kan oproepen. Weglaten scheelt tekenwerk bij elk frame. */
@media(hover:none){
  .feature-item,.gs-card,.model-card,.verloop-stap{box-shadow:none;}
}


/* ====================================================================
   12. BEWEGING UIT
   ====================================================================
   Wie in zijn toestel heeft aangezet dat animaties hem duizelig maken
   of afleiden, krijgt de site stil. Niet halfslachtig: alles wat
   hierboven verborgen begint, staat hier meteen op zijn eindpositie.
   Anders blijft er een leeg scherm over. */
@media(prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1 !important;transform:none !important;}
  .js-anim .onthul > span{transform:none !important;}
  .js-anim img.toon-foto{clip-path:none !important;transform:none !important;}
  .js-anim .hero .eyebrow,.js-anim .hero p.lead,
  .js-anim .hero .btnrow,.js-anim .hero .hero-contact,
  .js-anim .hero .stat-strip,.js-anim .hero .unit-demo{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
  .btn::before{display:none;}
}

/* Zonder JavaScript staat .js-anim niet op de pagina en is er dus ook
   niets verborgen - dat was in v3.1 al zo en blijft zo. */

/* --- 13. Het bereikbaarheidsbolletje --------------------------------
   In de hero stond een vaste regel met de openingsuren. Correct, maar het
   vroeg van de bezoeker dat hij zelf uitrekende of hij nu kon bellen - en
   dat is net het moment waarop iemand met een stuk airco in de hitte
   staat. Nu staat er wat hij wil weten: of er iemand is, en zo niet,
   vanaf wanneer. Zie deel/bereikbaar.php voor de uren.

   Het bolletje is groen als het antwoord ja is. Dat ene kleurpuntje doet
   meer voor het gevoel dat er iemand achter deze site zit dan welke
   tekst ook. */
.bereikbaar{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:0.02em;
  border:1px solid var(--haarlijn-licht);border-radius:999px;
  padding:7px 15px;margin:0 0 22px;
  color:#C4D4EC;
}
.bereikbaar .bb-stip{
  width:7px;height:7px;border-radius:50%;flex:none;
}
/* Open: groen, met een zachte gloed die langzaam ademt. Dat is het enige
   wat op deze pagina uit zichzelf beweegt, en juist daarom valt het op. */
.bereikbaar.open{color:#D8E7F7;border-color:rgba(46,213,115,0.34)}
.bereikbaar.open .bb-stip{
  background:#2ED573;box-shadow:0 0 0 3px rgba(46,213,115,0.22);
  animation:bbAdem 2.6s ease-in-out infinite;
}
@keyframes bbAdem{
  0%,100%{box-shadow:0 0 0 3px rgba(46,213,115,0.22);}
  50%    {box-shadow:0 0 0 6px rgba(46,213,115,0.08);}
}
/* Gaat vandaag nog open: goud. Gesloten: rustig grijsblauw, geen alarm. */
.bereikbaar.later{border-color:var(--goud-lijn)}
.bereikbaar.later .bb-stip{background:var(--gold);box-shadow:0 0 0 3px rgba(240,149,6,0.20)}
.bereikbaar.dicht{color:#8FA6C6}
.bereikbaar.dicht .bb-stip{background:#5C6F8C}

@media(prefers-reduced-motion:reduce){
  .bereikbaar.open .bb-stip{animation:none}
}