/* ====================================================================
   VB ENERGY — VORMGEVINGSLAAG v4 (VOORSTEL)  "Voluit huisstijl"
   ====================================================================
   vb.css en vb-vormgeving.css blijven ongewijzigd; dit bestand wordt
   er als derde laag NA geladen. Weghalen = de site staat er weer
   exact zoals voorheen.

   Wat deze laag doet:
     1. De hele site in het diepe logo-navy: geen lichte secties meer,
        maar panelen in het donkere logo-blauw met goud als accent.
     2. De kleurveranderende lijn bovenaan (de "bootlijn").
     3. Eén uitklaptab "Diensten" in het hoofdmenu (stijl; de HTML
        staat in deel/kop.php).
     4. De hero met coördinaten-badge en het accentwoord in goud.
   ==================================================================== */

:root{
  --navy-grond:#041030;        /* paginagrond — diep logo-navy */
  --navy-paneel:#092249;       /* panelen — logo-blauw donker */
  --navy-paneel-2:#0A1D3F;     /* iets diepere paneelvariant */
  --paneel-rand:rgba(159,191,239,0.18);
  --blauw-bleek:#9FBFEF;
  --geel:#F6EB25;              /* logo-geel, exact */
  --tekst-licht:#D9E2F2;
  --tekst-gedempt:#9FB4D6;
  /* Voor de handvol INLINE-kleuren in de PHP (quote-note, fotocredit):
     die zijn daar omgezet naar var(--inline-..., var(--oude-kleur)) —
     bestaat deze laag niet, dan vallen ze vanzelf terug op de oude kleur. */
  --inline-sterk:#FFFFFF;
  --inline-link:#FFD24A;
}

/* --- 1. De grond ---------------------------------------------------- */
body{background:var(--navy-grond);color:var(--tekst-licht);}

/* --- 2. De bootlijn: het kleurveranderende lijntje bovenaan --------- */
.bootlijn{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--geel),var(--accent));
  background-size:300% 100%;
  animation:bootschuif 9s linear infinite;
  pointer-events:none;
}
@keyframes bootschuif{to{background-position:300% 0;}}
@media(prefers-reduced-motion:reduce){ .bootlijn{animation:none;} }

/* --- 3. Uitklaptab "Diensten" in het hoofdmenu ----------------------- */
.navmap{position:relative;}
.navmap > summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-soft);font-size:16px;font-weight:500;
  letter-spacing:0.01em;padding:6px 16px;border-radius:999px;
  transition:color .16s ease, background .16s ease;
}
.navmap > summary::-webkit-details-marker{display:none;}
.navmap > summary::after{
  content:"";width:7px;height:7px;flex:none;
  border-right:1.8px solid var(--gold);border-bottom:1.8px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.navmap[open] > summary::after{transform:rotate(-135deg) translateY(-2px);}
.navmap > summary:hover{color:#fff;background:rgba(255,255,255,0.05);}
.navmap > summary.hier{color:#fff;background:rgba(255,255,255,0.09);}
.navmap > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.navmenu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:300px;z-index:60;
  /* zelfde donkere glaslook als de kopbalk zelf, met een gouden haarlijn
     bovenaan — zo hoort het paneel duidelijk bij de balk waar het uit komt */
  background:rgba(2,10,32,0.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(159,191,239,0.16);border-top:2px solid rgba(240,149,6,0.55);
  border-radius:14px;box-shadow:0 22px 50px rgba(0,0,0,0.55);
  padding:8px;
}
/* onzichtbare brug: anders klapt het menu dicht terwijl de muis
   van de tab naar het paneel beweegt */
.navmenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.navmenu a{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  transition:background .15s ease;
}
.navmenu a:hover{background:rgba(22,109,244,0.18);}
.navmenu a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.navmenu .nm-ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:10px;background:rgba(22,109,244,0.12);
  border:1px solid rgba(159,191,239,0.14);
}
.navmenu .nm-ico svg{width:20px;height:20px;}
.navmenu b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:14.5px;color:#fff;line-height:1.3;}
.navmenu .nm-sub{display:block;font-size:12.5px;color:var(--tekst-gedempt);line-height:1.4;}
/* groepskopje in het mobiele menu */
.mobiel-navkop{
  display:block;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-soft);
  padding:16px 24px 4px;
}

/* --- 3b. De hoofdmenurij zelf ----------------------------------------
   Vier kale woordjes pasten niet bij de rest: de menuknoppen krijgen nu
   dezelfde vormtaal als de site (Space Grotesk, fijne rand bij hover,
   goud voor de pagina waar u bent) en rechts staat de gouden
   offerteknop, zodat de rij ook een doel heeft. */
.hoofdnav{
  background:linear-gradient(180deg,rgba(9,34,73,0.55),rgba(1,9,40,0.30));
  border-top:1px solid rgba(159,191,239,0.10);
}
/* gouden haarlijn onder de hele kopbalk — dezelfde als boven de voet,
   en een echo van de bootlijn erboven */
header{border-bottom-color:rgba(240,149,6,0.30);}
/* width:100% is nodig: nav{display:flex} in vb.css maakt van de binnenrij
   een flex-item dat krimpt tot zijn inhoud, en dan hangt de absolute
   offerteknop bovenop de laatste menuknoppen */
.hoofdnav-binnen{position:relative;width:100%;gap:10px;padding:10px 32px;}
.hoofdnav a.navlink, .navmap > summary{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;
  color:var(--tekst-licht);
  padding:9px 18px;border-radius:11px;border:1px solid transparent;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
.hoofdnav a.navlink:hover, .navmap > summary:hover{
  color:#fff;background:rgba(22,109,244,0.12);border-color:var(--paneel-rand);
}
/* De pagina waar u bent: in het logo-blauw — goud blijft voor de knoppen
   die iets doen (offerte, bellen) */
.hoofdnav a.navlink.hier, .navmap > summary.hier{
  color:#fff;background:rgba(22,109,244,0.18);border-color:rgba(92,147,224,0.55);
}
/* De Start-knop: een huisje voor het woord. Het huisje is er voor wie de
   knoppen scant zonder te lezen; het woord voor wie ze wel leest. Allebei
   nodig - een icoontje alleen is voor veel mensen een raadsel. */
.navlink-start{display:inline-flex;align-items:center;gap:7px;}
.nav-huis{width:16px;height:16px;flex:none;opacity:.85;}
.navlink-start.hier .nav-huis{opacity:1;}

/* de offerteknop rechts in de menurij; de menuknoppen zelf blijven
   netjes in het midden staan */
.nav-cta{
  position:absolute;right:32px;top:50%;transform:translateY(-50%);
  padding:10px 18px;font-size:14px;border-radius:10px;
}
/* btn-gold tilt bij hover omhoog; hier vecht dat met de verticale
   centrering, dus blijft de knop gewoon staan */
.nav-cta:hover{transform:translateY(-50%);}
.nav-cta:active{transform:translateY(calc(-50% + 1px));}
/* onder deze breedte komt de knop te dicht bij de menuknoppen;
   het telefoonnummer in de balk erboven vangt het dan op */
@media(max-width:1120px){ .nav-cta{display:none;} }

/* --- 4. Hero: goud accentwoord ---------------------------------------
   (De badge boven de titel blijft de eigen VB-badge uit vb-vormgeving.) */
/* het accentwoord in massief goud in plaats van een kleurverloop */
.hero h1 em{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--gold);color:var(--gold);
}
/* de cijfers in de statstrook in goud, zoals op de voorbeeldschermen */
.stat .num{color:var(--gold);}

/* De fotokaart rechts in de hero (de interactieve koelt/verwarmt-demo
   staat sinds v4 bovenaan de aircopagina) */
.hero-kaart{
  position:relative;border:1px solid rgba(92,147,224,0.35);border-radius:20px;
  background:linear-gradient(180deg,rgba(22,109,244,0.16),rgba(9,34,73,0.4));
  box-shadow:0 30px 70px rgba(0,0,0,0.42);
  padding:34px 34px 26px;
}
.hero-kaart img{max-width:100%;height:auto;margin:0 auto;display:block;
  filter:drop-shadow(0 18px 30px rgba(1,4,16,0.55));}
.hero-kaart .kaart-label{
  display:flex;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--paneel-rand);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;
  color:var(--tekst-gedempt);text-transform:uppercase;
}
.hero-kaart .kaart-label b{color:var(--gold-soft);font-weight:500;}

/* Met een sfeerfilm erin wordt de kaart een venster: de film vult hem
   van rand tot rand, met de labelstrook eronder. */
.hero-film{padding:0;overflow:hidden;}
.hero-video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--navy-paneel-2);
}
.hero-film .kaart-label{
  margin:0;padding:14px 22px 15px;border-top:1px solid var(--paneel-rand);
  background:rgba(1,9,40,0.55);
}

/* ===== Twee alternatieve uitvoeringen van de hero (previewhulpje ?hero=) ==
   B. "rand": de film zonder kader, doorlopend tot de schermrand. */
@media(min-width:901px){
  .hero-rand .hero-grid{align-items:center;}
  .hero-rand .hero-film{
    border:0;background:none;box-shadow:none;border-radius:18px 0 0 18px;
    margin-right:calc(50% - 50vw);
  }
  .hero-rand .hero-film .hero-video{aspect-ratio:3/2;border-radius:18px 0 0 18px;}
  .hero-rand .hero-film .kaart-label{
    position:absolute;left:0;right:0;bottom:0;border-top:0;
    background:linear-gradient(0deg,rgba(1,9,40,0.82),transparent);
    padding:34px 26px 16px;
  }
}

/* C. "achter": de film over de volle breedte achter de tekst. */
.hero-achtergrond{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-achtergrond .hero-video{
  width:100%;height:100%;object-fit:cover;aspect-ratio:auto;display:block;
}
/* De sluier maakt de tekst leesbaar: stevig donker langs links waar de tekst
   staat, veel opener langs rechts zodat de kamer echt te zien blijft. De
   tweede laag houdt de boven- en onderrand donker, zodat de kopbalk en de
   sectie eronder er vloeiend op aansluiten. */
.hero-sluier{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,9,31,0.95) 0%,rgba(4,9,31,0.88) 34%,rgba(4,9,31,0.52) 62%,rgba(4,9,31,0.24) 100%),
    linear-gradient(180deg,rgba(4,9,31,0.6) 0%,transparent 22%,transparent 72%,rgba(4,16,48,0.9) 100%);
}
.hero-achter .wrap{position:relative;z-index:1;}
.hero-achter::before{display:none;} /* het fijne raster botst met de film */
/* Op een smal scherm loopt de tekst over de volle breedte: daar moet de
   sluier van onderaf dekken in plaats van van links. */
@media(max-width:900px){
  .hero-achter .hero-sluier{
    background:linear-gradient(180deg,rgba(4,9,31,0.72) 0%,rgba(4,9,31,0.86) 34%,rgba(4,16,48,0.95) 100%);
  }
}
@media(min-width:901px){
  .hero-achter .hero-grid{grid-template-columns:minmax(0,640px);}
  /* Compacter dan de gewone hero: de film vraagt hoogte, maar de gouden
     offerteknop moet op een gewone laptop nog binnen het eerste scherm
     vallen. Daarom een tikje kleinere titel en krappere tussenruimtes. */
  .hero-achter{
    padding-top:clamp(36px,4vw,60px);
    padding-bottom:clamp(40px,4.5vw,64px);
    min-height:min(640px,80vh);
  }
  .hero-achter h1{font-size:clamp(32px,4.3vw,54px);}
  .hero-achter p.lead{margin:18px 0 26px;max-width:44ch;}
  .hero-achter .bereikbaar{margin-bottom:18px;}
}

/* --- 4b. De kop van de aircopagina -----------------------------------
   De vertrouwde koelen/verwarmen-titel met de demo ernaast. "Koelen"
   licht blauw op, "verwarmen" warm — en het woord van de gekozen stand
   gloeit mee met de Koelt/Verwarmt-knop in de demo, zuiver met CSS. */
/* De kop van de aircopagina staat op een sfeerfoto die over de volle
   breedte doorloopt. De foto zit in een laag áchter de tekst (::before),
   met dezelfde donkere sluier als de hero op de startpagina: links dekkend
   voor de leesbaarheid, rechts open zodat de kamer te zien blijft. */
.airco-hero{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(36px,5vw,64px);
  align-items:center;margin:18px 0 44px;
  /* extra lucht bovenaan: daar staat op de foto de unit met de luchtstroom,
     en die moet naast de demokaart zichtbaar blijven */
  padding:clamp(56px,7vw,104px) 0 clamp(28px,4vw,60px);
}
.airco-hero::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:
    linear-gradient(90deg,rgba(4,9,31,0.95) 0%,rgba(4,9,31,0.86) 32%,rgba(4,9,31,0.5) 60%,rgba(4,9,31,0.26) 100%),
    linear-gradient(180deg,rgba(4,16,48,0.7) 0%,transparent 22%,transparent 68%,rgba(4,16,48,0.95) 100%),
    url("../images/airco-sfeer.webp") center 8% / cover no-repeat;
}
@media(max-width:900px){
  /* gestapeld: de sluier dekt van onderaf in plaats van van links */
  .airco-hero::before{
    background:
      linear-gradient(180deg,rgba(4,16,48,0.8) 0%,rgba(4,9,31,0.88) 40%,rgba(4,16,48,0.96) 100%),
      var(--hero-airco, url("../images/airco-sfeer.webp")) center 38% / cover no-repeat;
  }
}
@media(max-width:900px){ .airco-hero{grid-template-columns:1fr;gap:30px;} }
.airco-hero h1{font-size:clamp(31px,3.9vw,52px);line-height:1.06;letter-spacing:-0.03em;}
.airco-hero .desc{margin-bottom:0;}
/* De tekst staat alleen op de foto. */
.airco-hero{grid-template-columns:minmax(0,640px);}

/* --- Kop van een dienstpagina op een sfeerfoto -------------------------
   Zelfde behandeling als .airco-hero, maar voor de andere dienstpagina's.
   De foto komt uit een aparte klasse, zodat elke pagina zijn eigen beeld
   krijgt zonder de opmaak te herhalen. */
/* De houder loopt over de volle breedte van .wrap: alleen zo komt de
   fotoband met calc(50% - 50vw) precies tot aan beide schermranden. De
   tekst erbinnen wordt apart smal gehouden. */
.dienst-hero{
  position:relative;isolation:isolate;
  /* ruim bemeten: de band toont een horizontale snede uit de foto, en met
     te weinig hoogte blijft daar niets van over */
  padding:clamp(64px,7.5vw,116px) 0 clamp(48px,5.5vw,84px);
  margin:8px 0 40px;
}
.dienst-hero > *{max-width:660px;}
.dienst-hero::before{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-position:center 46%;background-size:cover;background-repeat:no-repeat;
}
.dienst-hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:
    linear-gradient(90deg,rgba(4,9,31,0.95) 0%,rgba(4,9,31,0.86) 34%,rgba(4,9,31,0.5) 62%,rgba(4,9,31,0.24) 100%),
    linear-gradient(180deg,rgba(4,16,48,0.72) 0%,transparent 22%,transparent 70%,rgba(4,16,48,0.95) 100%);
}
.dienst-hero .desc{margin-bottom:0;}
.hero-laadpaal::before{background-image:var(--hero-laadpalen, url("../images/laadpaal-sfeer.webp"));background-position:center 52%;}
/* Niko-campagnebeeld: de zwarte schakelaar staat rechts in beeld, precies
   waar de sluier het lichtst is, dus die blijft zichtbaar naast de tekst. */
.hero-elektriciteit::before{background-image:var(--hero-elektriciteit, url("../images/elek-sfeer.webp"));background-position:center 62%;}
@media(max-width:900px){
  .dienst-hero > *{max-width:none;}
  .dienst-hero::after{
    background:linear-gradient(180deg,rgba(4,16,48,0.78) 0%,rgba(4,9,31,0.88) 40%,rgba(4,16,48,0.96) 100%);
  }
}

/* --- Fotobanden op de aircopagina --------------------------------------
   Blokken die over de volle breedte op een sfeerfoto staan. De foto hoort
   bij wat er staat: een warme woonkamer bij het verhaal over verwarmen,
   iemand in de zetel bij het blok over de app. Het paneel zelf blijft
   leesbaar doordat het licht doorschijnend over de foto ligt. */
.foto-band{
  position:relative;isolation:isolate;
  padding:clamp(48px,6vw,88px) 0;
  margin:clamp(40px,5vw,72px) 0;
}
.foto-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-position:center 42%;background-size:cover;background-repeat:no-repeat;
}
/* de sluier ligt als tweede laag over de foto en houdt de tekst leesbaar */
.foto-band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,9,31,0.92) 0%,rgba(4,9,31,0.8) 40%,rgba(4,9,31,0.45) 78%,rgba(4,9,31,0.28) 100%),
    linear-gradient(180deg,rgba(4,16,48,0.96) 0%,transparent 18%,transparent 78%,rgba(4,16,48,0.96) 100%);
}
.band-warmte::before{background-image:url("../images/airco-warmte.webp");}
.band-app::before{background-image:url("../images/airco-app.webp");background-position:center 36%;}
/* de blokken zelf: doorschijnend, zodat de foto meespeelt */
.foto-band .warmte,.foto-band .appblok{
  background:rgba(6,20,52,0.82);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-color:rgba(159,191,239,0.22);
  box-shadow:0 22px 60px rgba(1,4,16,0.45);
  margin-top:0;margin-bottom:0;
}
.foto-band .warmte-cijfer div,.foto-band .warmte-klein{background:rgba(1,9,40,0.55);}
@media(max-width:900px){
  /* gestapeld: van onderaf dekken in plaats van van links */
  .foto-band::after{
    background:linear-gradient(180deg,rgba(4,16,48,0.9) 0%,rgba(4,9,31,0.86) 40%,rgba(4,16,48,0.96) 100%);
  }
}
.airco-hero h1 em{font-style:normal;}
/* Dezelfde behandeling als het beklemtoonde woord op de vorige site
   (vb-vormgeving.css): een kleurverloop ín de letters. "Koelen" in de
   koele blauwtinten van de airco, "verwarmen" in het goud van het logo. */
.woord-koel{
  color:#7FB3F2; /* terugval voor browsers zonder background-clip:text */
  background:linear-gradient(96deg,var(--frost) 8%,#A9C9F5 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.woord-warm{
  color:var(--gold-soft);
  background:linear-gradient(96deg,var(--gold-soft) 0%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* --- 5. Bovenschriften op de donkere grond --------------------------- */
.kicker,h2.kicker,.subpage h2.kicker{color:var(--gold-soft);}

/* De hoofdstuknummers (01, 02, ...) voor de opschriften zijn eruit.
   Ze telden alleen de opschriften die toevallig RECHTSTREEKS in .wrap
   stonden; opschriften binnen een blok telden niet mee. Gevolg: op de
   aircopagina begon de nummering pas halverwege bij "Populaire modellen",
   op een gemeentepagina stond er twee keer "Werkgebied" met een ander
   nummer, en nergens klopte de volgorde met wat de bezoeker ziet.
   Het gouden streepje blijft: dát is het herkenningspunt. */
.wrap > .kicker::before{content:none;}
.gallery-label,.subpage h2.gallery-label,h2.gallery-label{color:var(--blauw-bleek);}

/* --- 6. De vroegere LICHTE secties, nu in het logo-blauw ------------- */

/* Intro ("Airco-specialist met elektriciteit als sterke basis") */
.intro{background:linear-gradient(180deg,var(--navy-paneel-2) 0%,var(--navy-grond) 100%);
  border-block:1px solid var(--paneel-rand);}
.intro h2{color:#fff;}
.intro-body p{color:var(--tekst-gedempt);}
.intro-body strong{color:#fff;}
.gem-media-onder{color:var(--tekst-gedempt);}
.gem-media-onder strong{color:#fff;}
.gem-solo figcaption,.gem-slide-bij{color:var(--tekst-gedempt);}
.gem-slide-stippen button{background:rgba(255,255,255,0.22);}
.gem-slide-stippen button:hover{background:rgba(255,255,255,0.4);}

/* Waarom-strook */
.why{background:rgba(22,109,244,0.06);border-block:1px solid var(--paneel-rand);}
.why-item{background:var(--navy-paneel);border:1px solid var(--paneel-rand);}
.why-item h3{color:#fff;}
.why-item p{color:var(--tekst-gedempt);}

/* Werkgebied */
.regio{background:var(--navy-grond);border-top-color:var(--paneel-rand);}
.regio h2{color:#fff;}
.pill{color:var(--tekst-licht);background:rgba(22,109,244,0.10);
  border-color:rgba(92,147,224,0.35);}
/* De thuisbasis: exact de oplicht-toestand die de andere pillen bij
   hover krijgen, maar dan permanent. De tekst is IDENTIEK aan de
   andere pillen (zelfde kleur, zelfde gewicht) — alleen het pilletje
   zelf licht op. */
.pill.home{background:rgba(22,109,244,0.22);color:var(--tekst-licht);
  border-color:var(--accent);
  box-shadow:0 5px 16px rgba(22,109,244,0.25);}
.pill.hier{background:rgba(22,109,244,0.28);color:#fff;
  border-color:var(--accent-soft);font-weight:600;}
a.pill:hover,a.pill:focus-visible{
  color:#fff;border-color:var(--accent);background:rgba(22,109,244,0.22);
  box-shadow:0 5px 16px rgba(22,109,244,0.25);}
.regio-onder{color:var(--tekst-gedempt);}

/* FAQ: elke vraag een eigen paneel, zoals op de voorbeeldschermen */
.faq{background:linear-gradient(180deg,var(--navy-paneel) 0%,var(--navy-grond) 100%);}
.faq h2{color:#fff;}
.faq-list{border-top:0;margin-top:32px;}
.faq-item{border:1px solid var(--paneel-rand);border-radius:14px;
  background:var(--navy-paneel-2);margin-bottom:12px;padding:0 24px;
  overflow:hidden;transition:border-color .2s ease;}
.faq-item[open]{border-color:rgba(22,109,244,0.6);}
.faq-q{color:#fff;padding:20px 0;}
.faq-q .plus{color:var(--gold);}
.faq-item[open] .faq-q .plus{color:var(--gold);}
.faq-a p{color:var(--tekst-gedempt);}

/* Garantie (zelfde opbouw als FAQ, met een warme goudgloed bovenaan) */
.faq.garantie{background:
  radial-gradient(640px 320px at 12% 0%,rgba(240,149,6,0.08),transparent 70%),
  var(--navy-grond);}
.gs-card{background:var(--navy-paneel);border:1px solid var(--paneel-rand);}
.gs-card .gs-num{color:#fff;}
.gs-card .gs-num small{color:var(--tekst-gedempt);}
.gs-card .gs-t{color:var(--blauw-bleek);}
.gs-card p{color:var(--tekst-gedempt);}

/* Offerte: de sectie donker, het formulier zelf blijft een wit blad —
   een invulformulier moet ogen als papier, en alle veldkleuren
   blijven zo gewoon kloppen. */
.quote-section{background:linear-gradient(180deg,var(--navy-paneel) 0%,var(--navy-grond) 100%);
  border-top-color:var(--paneel-rand);}
.quote-section h2{color:#fff;}
.quote-section > .wrap > p{color:var(--tekst-gedempt);}
.quote-side h3,.quote-side .sim-kop{color:#fff;}
.quote-side li{background:rgba(22,109,244,0.08);border-left:3px solid var(--accent);}
.quote-side li b{color:#fff;}
.quote-side li span{color:var(--tekst-gedempt);}
.quote-note{background:rgba(1,9,40,0.5);color:var(--tekst-gedempt);
  border:1px solid var(--paneel-rand);}
.quote-note a{color:var(--gold-soft);}
.sim-kaart{background:var(--navy-paneel);border-color:rgba(92,147,224,0.4);
  box-shadow:none;}
.sim-kaart h3,.sim-kaart .sim-kop{color:#fff;}
.sim-kaart p{color:var(--tekst-gedempt);}
.sim-kicker{color:var(--blauw-bleek);background:rgba(22,109,244,0.16);}
.sim-kaart.gekozen{background:var(--navy-paneel);border-color:var(--accent);}
.sim-kaart.gekozen .sim-knop{background:rgba(22,109,244,0.14);color:#fff;
  border:1.5px solid rgba(92,147,224,0.55);}
.sim-kaart.gekozen .sim-knop:hover{background:rgba(22,109,244,0.24);}
.sim-voet{color:var(--tekst-gedempt) !important;}

/* Dienstpagina's (airco / elektriciteit / laadpalen) */
.subpage.airco{background:
  radial-gradient(760px 420px at 12% -6%,rgba(22,109,244,0.16),transparent 70%),
  var(--navy-grond);}
.subpage.elek{background:
  radial-gradient(760px 420px at 12% -6%,rgba(240,149,6,0.10),transparent 70%),
  var(--navy-grond);}
.subpage.laadpaal{background:var(--navy-grond);}
.subpage h1,.subpage h2{color:#fff;}
/* ... behalve in de twee blokken die bewust een wit blad blijven: daar zou
   witte tekst onzichtbaar zijn (de split-tekening is op wit getekend). */
.subpage .splitdemo h2,.subpage .splitdemo h3,
.subpage .quote-form h2,.subpage .quote-form h3{color:var(--ink);}
.subpage .splitdemo .sd-lead,.subpage .splitdemo .sd-note{color:var(--slate);}
.subpage .splitdemo .sd-lead a{color:var(--accent-tekst);}
.subpage .desc{color:var(--tekst-gedempt);}
.subpage .desc a,.rz-intro a,.rz-meer a,.qf-hint-donker a{color:var(--gold-soft);}
.subpage-tag{border-color:var(--paneel-rand);color:var(--tekst-gedempt);}
.kruimel{color:var(--tekst-gedempt);}
.kruimel a{color:var(--tekst-gedempt);text-decoration-color:rgba(159,191,239,0.35);}
.kruimel a:hover{color:#fff;}
.kruimel span[aria-current]{color:#fff;}
.feature-item{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.feature-item p{color:var(--tekst-licht);}
.brand-cred{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.brand-cred-name{color:#fff;}
.brand-cred-tag{color:var(--blauw-bleek);}
.brand-cred img{background:#fff;border-radius:8px;padding:4px 8px;}
.model-card{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.model-card .m-icon{background:#fff;border-radius:10px;}
.model-card .m-brand{color:var(--blauw-bleek);}
.model-card h3{color:#fff;}
.model-card p{color:var(--tekst-gedempt);}
.warmte{background:var(--navy-paneel);border-color:var(--paneel-rand);box-shadow:none;}
.warmte h2{color:#fff;}
.warmte p{color:var(--tekst-gedempt);}
.warmte p strong{color:#fff;}
.warmte-cijfer div{background:rgba(1,9,40,0.5);}
.warmte-cijfer b{color:#fff;}
.warmte-cijfer span{color:var(--tekst-gedempt);}
.warmte-klein{background:rgba(1,9,40,0.5);color:var(--tekst-gedempt);}
.vasteprijs{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.vasteprijs h2,.vasteprijs h3{color:#fff;}
.vasteprijs p{color:var(--tekst-gedempt);}
.appblok{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.appblok h3{color:#fff;}
.appblok .ab-tag{color:var(--blauw-bleek);}
.appblok .ab-lead{color:var(--tekst-gedempt);}
.appblok li{color:var(--tekst-licht);}
.creds-box{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.creds-box .cb-name{color:#fff;}
.creds-box .cb-role{color:var(--blauw-bleek);}
/* .creds-lijst is dezelfde lijst met erkenningen, maar sinds 22 augustus 2026
   in de rechterkolom in plaats van in het witte kader links. Zonder deze
   regels staan de vetgedrukte titels in donkerblauw op donkerblauw. */
.creds-box li,.creds-lijst li{color:var(--tekst-gedempt);}
.creds-box li b,.creds-lijst li b{color:#fff;}
.creds-box .cb-nr,.creds-lijst .cb-nr{background:rgba(1,9,40,0.55);color:var(--tekst-gedempt);}
.creds-lijst{border-top-color:var(--paneel-rand);}
/* De regel met naam en rol boven de erkenningen: op de donkere grond moet de
   naam wit zijn, anders staat donkerblauw op donkerblauw. */
.intro-wie{border-top-color:var(--paneel-rand);color:var(--tekst-gedempt);}
.intro-wie strong{color:#fff;}
.qf-hint-donker{font-size:12.5px;color:var(--tekst-gedempt);line-height:1.6;
  background:rgba(1,9,40,0.5);border-radius:8px;padding:12px 14px;margin-top:4px;}
/* de twee uitleg-blokken op de laadpalenpagina staan buiten het formulier
   en erven de lichte opmaak; hier de donkere variant. :not() erbij zodat
   hints BINNEN het witte formulier hun eigen lichte opmaak houden. */
.subpage .qf-hint:not(.quote-form .qf-hint){background:rgba(1,9,40,0.5);color:var(--tekst-gedempt);
  border:1px solid var(--paneel-rand);}
.subpage .qf-hint:not(.quote-form .qf-hint) strong{color:#fff;}
.subpage .qf-hint:not(.quote-form .qf-hint) a{color:var(--gold-soft);}
/* het uitlegvenster met de split-tekening blijft een wit blad: het is een
   technisch schema, en de tekening zelf is op wit getekend */

/* Realisatiekaarten */
.rz-card{background:var(--navy-paneel);border-color:var(--paneel-rand);
  box-shadow:0 6px 20px rgba(1,4,16,0.3);}
.rz-card:hover{box-shadow:0 14px 34px rgba(1,4,16,0.45);}
.rz-shots{background:var(--navy-paneel-2);}
.rz-tag{color:var(--blauw-bleek);}
.rz-body h3{color:#fff;}
.rz-intro,.rz-meer{color:var(--tekst-gedempt);}
.bewijs-grid figcaption{color:var(--tekst-gedempt);}
.bewijs-onder{color:var(--tekst-gedempt);}
.bewijs-onder strong{color:#fff;}
.bewijs-grid img{background:var(--navy-paneel-2);}
.gallery img{border-color:var(--paneel-rand);}
.gallery-vrij img{background:var(--navy-paneel-2);}

/* Verder lezen */
.verder{background:var(--ink,#010928);border-top-color:var(--paneel-rand);}
.verder h2{color:#fff;}
.verder-kaart{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.verder-kaart h3{color:#fff;}
.verder-kaart p{color:var(--tekst-gedempt);}
.verder-kaart .go{color:var(--gold-soft);}

/* Verloopstappen ("Zo gaat het verder na uw aanvraag") */
.verloop-stap{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.verloop-stap b{color:#fff;}
.verloop-stap span{color:var(--tekst-gedempt);}

/* De belknop-variant die op een lichte grond was getekend (404 en
   gemeentepagina's): nu op de donkere grond */
.btn-outline-dark{background:rgba(22,109,244,0.08);color:#fff;
  border-color:rgba(159,191,239,0.4);}
.btn-outline-dark:hover{background:rgba(22,109,244,0.18);border-color:var(--accent-soft);}

/* Slot-oproep (o.a. personeelspagina): de gloed uit de voorbeeldschermen */
.cta{background:
  radial-gradient(760px 400px at 50% 0%,rgba(22,109,244,0.30),transparent 70%),
  var(--ink,#010928);}

/* Het juridische venster mee in het donker */
.legal-panel{background:#081A3A;border:1px solid var(--paneel-rand);}
.legal-panel h2,.legal-panel h3{color:#fff;}
.legal-panel p,.legal-panel li{color:var(--tekst-gedempt);}
.legal-panel .upd{color:var(--tekst-gedempt);}
.legal-panel p a,.legal-panel a{color:var(--gold-soft);}
.legal-close{color:var(--tekst-gedempt);}
.legal-close:hover{background:rgba(255,255,255,0.08);color:#fff;}

/* Tekstlinks die voor de witte achtergrond ontworpen waren (o.a. de
   "Meer over ..."-links op de gemeentepagina's en de 404): nu in goud */
.qf-hint a, .faq-a a, .desc a, .sd-lead a, .rz-intro a, .tekstlink{
  color:var(--gold-soft);
  text-decoration-color:rgba(249,204,134,0.45);
}
.qf-hint a:hover, .faq-a a:hover, .desc a:hover, .sd-lead a:hover,
.rz-intro a:hover, .tekstlink:hover{
  color:#fff;text-decoration-color:currentColor;
}
/* ... maar binnen het witte formulier blijven ze gewoon donkerblauw */
.quote-form .qf-hint a{color:var(--accent-tekst);
  text-decoration-color:rgba(22,109,244,0.45);}
.quote-form .qf-hint a:hover{color:#0B4FBF;}

/* Het geruststellingszinnetje onder de verloopstappen staat BUITEN het
   witte formulier, dus donker in plaats van het lichte hintblok. Alleen
   .verloop aanspreken: mikten we op .quote-section, dan kregen ook alle
   hints BINNEN het witte formulier deze donkere opmaak, en dat leverde
   lichte tekst op een lichtgrijs vlak op. */
.verloop .qf-hint{background:rgba(1,9,40,0.5);color:var(--tekst-gedempt);
  border:1px solid var(--paneel-rand);}
.verloop .qf-hint strong{color:#fff;}
.verloop .qf-hint a{color:var(--gold-soft);}

/* De meldingen na het versturen (gelukt / mislukt / te druk) staan ook
   buiten het witte formulier: donkere uitvoering met dezelfde betekeniskleuren */
.qf-ok{background:rgba(46,213,115,0.12);border-color:rgba(46,213,115,0.4);color:#A7E8C0;}
.qf-fout{background:rgba(217,83,79,0.14);border-color:rgba(217,83,79,0.5);color:#F5B7B1;}
.qf-druk{background:rgba(240,149,6,0.12);border-color:rgba(240,149,6,0.45);color:var(--gold-soft);}
.qf-melding strong{color:#fff;}

/* --- Slot-oproep: de afsluitende band boven de voet ------------------
   (HTML in deel/slot-oproep.php, op elke pagina via deel/voet.php) */
.slot-oproep{
  padding:clamp(72px,9vw,120px) 0;text-align:center;
  background:
    radial-gradient(760px 400px at 50% 0%,rgba(22,109,244,0.30),transparent 70%),
    var(--ink,#010928);
  border-top:1px solid var(--paneel-rand);
}
.slot-oproep .kicker{justify-content:center;}
.slot-oproep h2{
  font-size:clamp(28px,4vw,44px);color:#fff;
  letter-spacing:-0.028em;line-height:1.12;
  max-width:22ch;margin:0 auto 18px;
}
.slot-oproep p{color:var(--tekst-gedempt);font-size:16px;line-height:1.7;
  max-width:52ch;margin:0 auto 34px;}
.slot-oproep .btnrow{justify-content:center;}
.slot-oproep .slot-onder{font-size:13.5px;margin:22px auto 0;}
/* de scoreregel: één regel vertrouwen onder de knoppen */
.slot-score{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 0;font-family:'JetBrains Mono',monospace;font-size:12.5px;
  color:var(--tekst-gedempt);
}
.slot-score .sterrenrij{margin:0;}
.slot-score a{font-weight:600;}

/* Haarlijnen tussen secties: licht in plaats van donker */
.regio,.quote-section,.why{border-top-color:var(--paneel-rand);}

/* --- Contactpagina ----------------------------------------------------
   Doel: alles op één scherm, ook op een laptop van 1280x720, zonder scrollen.
   Daarom staat de kop op één regel met de bereikbaarheidspil en de knop naar
   het offerteformulier ernaast, en staan daaronder drie kolommen naast
   elkaar: de vier contactkaarten (2x2), de openingsuren en de socials.
   Onder 1040 px valt het terug op twee kolommen en onder 720 px op één - op
   een telefoon past dit nooit op één scherm en dat hoeft ook niet. */
/* De contactpagina is met opzet krap gehouden zodat ze op één scherm past.
   Onderaan mocht dat niet ten koste gaan van de lucht vóór de voettekst: die
   plakte er tegenaan, en omdat de voettekst hetzelfde nummer en adres herhaalt
   leek het één lange brij. */
.contactpagina{
  padding-top:22px;padding-bottom:64px;
  /* De contactpagina is kort gehouden zodat ze op één scherm past. Gevolg op
     een groot scherm: de voettekst stond meteen mee in beeld, met daarin het
     grote logo — terwijl het logo in de kopbalk er ook nog stond. Twee keer
     hetzelfde merk op één scherm.
     Vandaar een minimumhoogte: wat er aan schermruimte overblijft, gaat naar
     deze sectie in plaats van naar de voettekst. Is het scherm klein of de
     pagina langer dan het scherm, dan doet deze regel niets.
     De 160px is de kopbalk plus het kruimelpad erboven. svh en niet vh: op een
     telefoon telt vh de adresbalk mee, waardoor de pagina bij het scrollen
     zou verspringen. */
  min-height:calc(100vh - 160px);
  min-height:calc(100svh - 160px);
}
@media(max-width:640px){ .contactpagina{padding-bottom:44px;} }

/* En de contactkolom in de voettekst hoort daar niet nog eens: nummer, adres
   en openingsuren staan op deze pagina al in de kaarten erboven. De rest van
   de voettekst (navigatie, wettelijke vermeldingen) blijft wel staan. */
/* De contactkolom in de voettekst staat er op deze pagina niet (zie
   deel/voet.php); dan moet het raster ook maar twee kolommen breed zijn in
   plaats van drie, anders blijft er een gat staan.
   :has() en niet "+ footer": de sectie zit in <main> en de voettekst is een
   broer van <main>, dus die twee staan niet naast elkaar in de boom. Het
   offerteformulier gebruikt :has() al, dus dat draagt hier. */
@media(min-width:761px){
  body:has(.contactpagina) footer .foot-grid{grid-template-columns:1.3fr 1fr;}
}

.contact-kop{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px 30px;flex-wrap:wrap;}
/* Krimpen in plaats van afbreken: met flex-basis auto nam de linkerhelft haar
   volle tekstbreedte, waardoor de pil en de knop in het Frans naar een tweede
   regel sprongen. */
.contact-kop > div:first-child{flex:1 1 360px;min-width:0;}
.contact-kop-rechts{flex:0 0 auto;min-width:0;}
/* Op een smal scherm past de bereikbaarheidspil niet meer naast de knop:
   dan mag de rechterhelft de volle breedte nemen en zelf afbreken. */
@media(max-width:860px){
  .contact-kop-rechts{flex:1 1 100%;}
  .contact-kop-rechts .btn{flex:1 1 auto;text-align:center;}
}
.contactpagina h1{margin:6px 0 4px;font-size:clamp(28px,3.2vw,36px);}
.contactpagina .desc{margin:0;font-size:14.5px;}
.contactpagina .desc{max-width:640px;}
.contact-kop-rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;color:var(--tekst-gedempt);}
.contact-kop-rechts .bereikbaar{margin:0;}
.contact-kop-rechts .btn{padding:11px 18px;font-size:14px;min-height:0;}
/* Op een breed scherm staat «Vraag uw offerte aan» al als gouden knop in de
   kopbalk, recht boven deze. Twee keer dezelfde knop onder elkaar helpt
   niemand. Onder 1120px verdwijnt die in de kopbalk (.nav-cta), en dan is
   deze hier juist de enige — vandaar exact diezelfde grens. */
@media(min-width:1121px){ .contact-kop-rechts .btn{display:none;} }

/* Twee kolommen: links de vier kaarten in een 2x2, rechts de uren en de
   socials onder elkaar. Drie losse kolommen probeerden we eerst, maar dan
   eindigen de twee rechterpanelen halverwege en blijft er een groot leeg vlak
   onder staan - zo zijn beide kolommen ongeveer even hoog. */
.contact-body{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;
  align-items:start;margin-top:14px;}
.contact-zij{display:grid;gap:12px;align-content:start;}
@media(max-width:860px){ .contact-body{grid-template-columns:1fr;} }

.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;}
@media(max-width:520px){ .contact-grid{grid-template-columns:1fr;} }
.contact-kaart{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--navy-paneel);border:1px solid var(--paneel-rand);border-radius:15px;
  padding:15px 17px 14px;transition:transform .2s ease,border-color .2s ease;}
a.contact-kaart:hover{transform:translateY(-3px);border-color:rgba(240,149,6,.5);}
.contact-kaart .ck-ico{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(22,109,244,.14);border:1px solid var(--paneel-rand);color:var(--blauw-zacht);margin-bottom:5px;}
.contact-kaart .ck-ico svg{width:17px;height:17px;}
.contact-kaart .ck-ico.ck-wa{background:rgba(37,211,102,.16);color:#25D366;border-color:rgba(37,211,102,.4);}
.contact-kaart .ck-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blauw-bleek);}
.contact-kaart .ck-waarde{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;
  color:#fff;line-height:1.25;}
/* Het adres een maatje kleiner: op twee regels maakte het deze kaart - en dus
   de hele onderste rij - bijna 50 px hoger. */
.contact-kaart--stil .ck-waarde{font-size:15px;}

.contact-kaart .ck-onder{font-size:12px;color:var(--tekst-gedempt);line-height:1.4;}
/* Geen omkaderde knop maar een tekstlink: de knop maakte deze ene kaart
   65 px hoger dan de andere drie, en trok de hele rij mee. */
.contact-kaart .ck-route{margin-top:7px;padding:0;border:0;background:none;min-height:0;
  font:600 12.5px/1.4 'Inter',sans-serif;color:var(--accent-tekst);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(240,149,6,.45);}
.contact-kaart .ck-route:hover{color:#fff;text-decoration-color:currentColor;}

.contact-uren,.contact-sociaal{background:var(--navy-paneel);border:1px solid var(--paneel-rand);
  border-radius:15px;padding:15px 17px;}
.contact-uren h2,.contact-sociaal h2{font-size:16px;color:#fff;margin:0 0 6px;}
.contact-uren ul{list-style:none;margin:0 0 9px;padding:0;}
.contact-uren li{display:flex;justify-content:space-between;gap:14px;padding:4px 0;
  border-bottom:1px solid var(--paneel-rand);font-size:13.5px;color:var(--tekst-licht);}
.contact-uren li:last-child{border-bottom:0;}
.contact-uren li b{font-family:'JetBrains Mono',monospace;color:#fff;font-weight:500;}
.contact-uren li.dicht span,.contact-uren li.dicht b{color:var(--tekst-gedempt);}
.contact-uren-noot{font-size:11.5px;color:var(--tekst-gedempt);line-height:1.45;margin:0;}
.contact-sociaal p{font-size:12.5px;color:var(--tekst-gedempt);line-height:1.45;margin:0 0 9px;}

/* --- Toestemmingsbanner: de tweede knop "Weigeren" -------------------
   .cookieregel-ok (goud) staat al in vb.css. De weiger-knop is bewust
   rustiger maar even bereikbaar met één klik. */
.cookieregel-nee{flex:none;background:transparent;color:var(--tekst-licht);
  border:1.5px solid rgba(159,191,239,.45);border-radius:11px;
  font:600 15px/1 'Inter',sans-serif;
  cursor:pointer;padding:14px 24px;min-height:48px;
  transition:border-color .18s ease,background .18s ease,color .18s ease;}
.cookieregel-nee:hover{border-color:var(--blauw-bleek);background:rgba(22,109,244,.14);color:#fff;}
.cookieregel-nee:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;}
@media(max-width:520px){ .cookieregel-nee{width:100%;} }

/* --- Cookiebeleidpagina ---------------------------------------------- */
.cookie-blok{background:var(--navy-paneel);border:1px solid var(--paneel-rand);
  border-radius:16px;padding:26px 28px;margin:0 0 18px;max-width:860px;}
.cookie-blok h2{font-size:19px;color:#fff;margin:0 0 12px;}
.cookie-blok p{color:var(--tekst-gedempt);font-size:15px;line-height:1.7;margin:0 0 12px;}
.cookie-blok p:last-child{margin-bottom:0;}
.cookie-tabel{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:14px;}
.cookie-tabel th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blauw-bleek);
  padding:0 12px 10px 0;border-bottom:1px solid var(--paneel-rand);font-weight:400;}
.cookie-tabel td{padding:12px 12px 12px 0;border-bottom:1px solid var(--paneel-rand);
  color:var(--tekst-gedempt);line-height:1.6;vertical-align:top;}
.cookie-tabel tr:last-child td{border-bottom:0;}
.cookie-tabel code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#fff;
  background:rgba(1,9,40,.55);border-radius:6px;padding:2px 7px;display:inline-block;}
.cookie-tabel td.ja{color:var(--gold-soft);}
.cookie-tabel td.nee{color:var(--tekst-gedempt);}
.cookie-noot{font-size:13px !important;color:var(--tekst-gedempt);}
.cookie-keuze .btn{margin:6px 0 14px;}
@media(max-width:700px){
  /* op een smal scherm wordt de tabel een lijst met kopjes ervoor */
  .cookie-tabel thead{position:absolute;left:-9999px;}
  .cookie-tabel tr{display:block;padding:14px 0;border-bottom:1px solid var(--paneel-rand);}
  .cookie-tabel td{display:block;border:0;padding:3px 0;}
  .cookie-tabel td::before{content:attr(data-kop);display:block;
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--blauw-bleek);margin-bottom:2px;}
}
/* ===== Pauzeknop op de sfeerfilm (WCAG 2.2.2) =====
   Het knopje wordt door assets/vb.js in het filmkader gehangen. */
/* Alleen de kaartvariant heeft dit nodig. .hero-achtergrond staat hierboven al
   op position:absolute en is dus zelf al een positioneringspunt - die hier mee
   op relative zetten haalde de film uit zijn laag en duwde de herotekst eronder. */
.hero-film{position:relative;}
.film-pauze{
  position:absolute;right:12px;bottom:12px;z-index:4;
  width:38px;height:38px;padding:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,16,28,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;opacity:.55;transition:opacity .18s ease,background .18s ease;
}
.hero-film:hover .film-pauze,.hero-achtergrond:hover .film-pauze,
.film-pauze:hover,.film-pauze:focus-visible{opacity:1;background:rgba(10,16,28,.8);}
.film-pauze:focus-visible{outline:2px solid var(--goud, #C9A227);outline-offset:2px;}
.film-pauze svg{width:16px;height:16px;fill:currentColor;}
/* Op de kaartvariant zit onderaan al een label: het knopje schuift erboven. */
.hero-film .film-pauze{bottom:56px;}

/* De reviewrij stond alleen stil bij muisaanwijzing. Wie met het toetsenbord
   door de kaarten gaat, kon de tekst niet stilzetten. Nu ook bij focus. */
.review-track:focus-within{animation-play-state:paused;}

/* ===== Fotoalbum per project =========================================
   De vergrote foto had geen bediening: je zag er één en dat was het. Nu
   blader je door alle foto's van dat project, met de pijlen, met de
   pijltjestoetsen of met een veeg op een gsm. */
.zoom-knop{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;border:1px solid rgba(255,255,255,.3);
  background:rgba(10,16,28,.62);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s ease,border-color .18s ease;}
.zoom-knop:hover{background:rgba(10,16,28,.88);border-color:rgba(255,255,255,.6);}
.zoom-knop:focus-visible{outline:2px solid var(--goud,#C9A227);outline-offset:3px;}
.zoom-knop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.zoom-vorige{left:18px;}
/* Het kruisje: zonder zichtbare sluitknop wist niemand hoe hij eruit moest. */
.zoom-sluiten{top:18px;right:18px;transform:none;}
.zoom-volgende{right:18px;}
.zoom-teller{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:3;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.06em;
  color:#fff;background:rgba(10,16,28,.62);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:7px 15px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.zoom-bijschrift{position:absolute;left:50%;transform:translateX(-50%);bottom:58px;z-index:3;
  max-width:min(620px,86vw);text-align:center;font-size:14px;line-height:1.5;color:#E8EFFA;
  background:rgba(10,16,28,.62);border-radius:12px;padding:9px 16px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
/* Alleen tonen wanneer het album echt openstaat: bij het zweven over een foto
   verschijnt nog altijd gewoon de grote versie, zonder bediening eromheen. */
.zoom-overlay:not(.album) .zoom-knop,
.zoom-overlay:not(.album) .zoom-teller,
.zoom-overlay:not(.album) .zoom-bijschrift{display:none;}
@media(max-width:640px){
  .zoom-knop{width:44px;height:44px;}
  .zoom-vorige{left:8px;} .zoom-volgende{right:8px;}
  .zoom-bijschrift{font-size:13px;bottom:54px;}
}

/* ===== Balk van de testomgeving =====================================
   NIET IN GEBRUIK sinds 21/08/2026. De balk is uit deel/kop.php gehaald op
   vraag: je kan de site niet beoordelen met een streep over de bovenrand. Het
   waarschuwen gebeurt nu via "TEST" voor de titel in het tabblad.

   De opmaak blijft hier staan zodat de balk met een enkele div terug te
   plaatsen is. Bewust lelijk: het ergste wat kan gebeuren is dat iemand een
   testversie voor de echte site aanziet. */
.stagingbalk{
  position:sticky;top:0;z-index:1000;
  background:repeating-linear-gradient(135deg,#FDBA00 0 14px,#D97F04 14px 28px);
  color:#241300;font:600 13px/1 'Inter',sans-serif;letter-spacing:.02em;
  padding:9px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.stagingbalk span{font-family:'JetBrains Mono',monospace;font-weight:500;
  background:rgba(0,0,0,.14);border-radius:20px;padding:4px 10px;font-size:11.5px;}

/* Een eigen mededeling van de zaak: bouwvak, drukte, een verhuizing.
   Rustiger dan de stagingbalk - die moet schreeuwen, deze moet gelezen
   worden en dan mag de bezoeker verder. */
.mededelingsbalk{
  background:var(--deep);color:#E8EFFA;font:500 14px/1.5 'Inter',sans-serif;
  padding:11px 20px;text-align:center;border-bottom:1px solid rgba(255,255,255,.10);
}
.mededelingsbalk::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--gold);margin-right:9px;vertical-align:middle;
}
@media(max-width:640px){ .mededelingsbalk{font-size:13.5px;padding:10px 14px;text-align:left;} }

/* /realisaties/ in de donkere laag. Dezelfde klassen als in vb.css, en
   alleen de kleuren: het lichte paneel wordt hier een donker paneel, net
   zoals .vasteprijs hierboven. */
.rz-filter{background:var(--navy-paneel);border-color:var(--paneel-rand);}
.rz-filterkop{color:var(--tekst-gedempt);}
.rz-uitslag{color:var(--tekst-gedempt);}
.rz-feiten{color:var(--tekst-gedempt);}
.rz-tekst{color:var(--tekst-licht);}

/* Het blok "Werk dat we hier deden" op een gemeentebladzijde.

   Dat blok heeft in de code een inline background:#F5F7FB van VOOR deze
   laag. De bladzijde eromheen is sinds v4 donker: koppen wit, tekstlinks
   goud. Op dat lichte vlak gaf dat contrast 1.07 voor de kop en 1.34 voor
   de link - gemeten op 7 september 2026. Onleesbaar.

   Het viel nooit op omdat het blok alleen getekend wordt wanneer er een
   werk-tekst of een gekoppelde realisatie is, en alle negentien
   werk-teksten zijn leeg. Het is dus een sluimerende fout die pas
   zichtbaar werd toen realisaties aan een gemeente konden hangen.

   Zelfde oplossing als bij .vasteprijs hierboven: licht in vb.css, hier
   donker. De inline achtergrond wordt overschreven met !important, want
   een inline stijl weegt zwaarder dan een stijlblad. */
.gem-werk{background:var(--navy-paneel) !important;
  border-left-color:var(--accent) !important;}