/* ================================================================
   CARBON - tweede stijl, in de opzet van mhainstallaties.nl.
   Hangt aan exact hetzelfde HTML als Midnight; hier staan alleen
   de kleuren en de vormen. Verschil in een zin: Carbon is een
   doorlopend donker canvas waarop alles als opgetilde kaart staat,
   Midnight is afwisselend witte, grijze en zwarte vlakken met
   haarlijnen ertussen.
   Kleur blijft van hem: waar MHA goud doet, doet Carbon zilver.
   ================================================================ */
[data-thema=carbon]{
  --c-ink:#141514;
  --c-ink2:#1a1b1a;
  --c-ink3:#242524;
  --c-lijn:#3a3b38;
  --c-bone:#efeded;
  --c-bone2:#c6c4c0;
  --c-mute:#a8a6a2;
  --c-glans:linear-gradient(105deg,#8d8e8b,#fff 48%,#8d8e8b);
  /* één lichtveld voor de hele pagina, zie hieronder */
  --c-veld:
    radial-gradient(62rem 48rem at 84% -10%,rgba(255,255,255,.075),transparent 66%),
    radial-gradient(54rem 42rem at -10% 40%,rgba(255,255,255,.05),transparent 66%),
    radial-gradient(58rem 46rem at 108% 88%,rgba(255,255,255,.045),transparent 66%);
}

/* ---------- doorlopend canvas in plaats van losse vlakken ----------
   Eerst had elke sectie zijn eigen lichtglans. Die glans werd door de
   sectie afgeknipt, dus op elke sectiegrens stond een harde horizontale
   lijn: boven licht, eronder donker. Negen secties, negen randen.
   Nu ligt het licht één keer achter de hele pagina en zijn de secties
   zelf doorzichtig. De balk draagt hetzelfde veld op dezelfde plek,
   dus die loopt ook naadloos door in de hero. */
[data-thema=carbon] body{
  background-color:var(--c-ink);
  background-image:var(--c-veld);
  background-attachment:fixed;background-repeat:no-repeat;
  color:var(--c-bone);
}
[data-thema=carbon] .vak,
[data-thema=carbon] .vak--grijs,
[data-thema=carbon] .vak--zwart,
[data-thema=carbon] .hero,
[data-thema=carbon] .lok,
[data-thema=carbon] .voet{
  background-color:transparent;background-image:none;color:var(--c-bone);
}
[data-thema=carbon] .vak{
  padding:clamp(56px,6vw,88px) 0;
  position:relative;overflow:visible;
}
/* ritme zonder naad: om de sectie een iets lichter veld dat aan de boven-
   en onderkant uitdooft, dus nergens een rand waar de kleur omslaat */
[data-thema=carbon] .vak:nth-of-type(even)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    transparent,
    rgba(255,255,255,.03) 20%,
    rgba(255,255,255,.03) 80%,
    transparent);
}
[data-thema=carbon] .vak>.binnen,
[data-thema=carbon] .vak>.ws__rand{position:relative;z-index:1}
[data-thema=carbon] .vak p,
[data-thema=carbon] .vak--zwart p,
[data-thema=carbon] .lood,
[data-thema=carbon] .vak--zwart .lood{color:var(--c-bone2)}
[data-thema=carbon] h1,
[data-thema=carbon] h2,
[data-thema=carbon] h3{color:var(--c-bone)}

/* streep onder de kop, zoals MHA */
[data-thema=carbon] .streep{
  display:block;height:2px;width:56px;border-radius:999px;margin:18px 0 0;
  background:linear-gradient(105deg,#6d6e6b,#fff 48%,#6d6e6b);
}
[data-thema=carbon] .kopgroep h2{margin-bottom:0}
[data-thema=carbon] .kopgroep .streep+p{margin-top:20px}

/* ---------- kaart: de bouwsteen van deze stijl ---------- */
[data-thema=carbon] .balk{
  background-color:var(--c-ink);background-image:var(--c-veld);
  background-attachment:fixed;background-repeat:no-repeat;
  color:var(--c-bone);
}
[data-thema=carbon] .balk nav a:not(.knop){color:var(--c-mute)}
[data-thema=carbon] .balk nav a:not(.knop):hover,
[data-thema=carbon] .balk nav a:not(.knop)[aria-current]{color:var(--c-bone)}
[data-thema=carbon] .thema{background:rgba(255,255,255,.06);border-color:var(--c-lijn)}
[data-thema=carbon] .balk__punten{color:var(--c-mute)}
[data-thema=carbon] .balk__stijl[data-open] .balk__punten{color:var(--c-bone)}
[data-thema=carbon] .balk__stijl .thema{background:var(--c-ink3);border-color:var(--c-lijn)}
[data-thema=carbon] .thema__kop{color:var(--c-mute)}
[data-thema=carbon] .thema button{color:var(--c-mute)}
[data-thema=carbon] .thema button:hover{color:var(--c-bone)}
[data-thema=carbon] .thema button[aria-pressed=true]{background:var(--c-bone);color:var(--c-ink)}

[data-thema=carbon] .knop{background:var(--c-bone);border-color:var(--c-bone);color:var(--c-ink)}
[data-thema=carbon] .knop:hover{background:transparent;border-color:var(--c-bone);color:var(--c-bone)}
[data-thema=carbon] .knop--om{background:transparent;color:var(--c-bone);border-color:var(--c-bone)}
[data-thema=carbon] .knop--om:hover{background:var(--c-bone);color:var(--c-ink)}
[data-thema=carbon] .knop--wa{background:var(--wa);border-color:var(--wa);color:var(--wit)}
[data-thema=carbon] .knop--wa:hover{background:var(--wa-diep);border-color:var(--wa-diep);color:var(--wit)}

/* ---------- hero ---------- */
/* achtergrond komt van het paginaveld, zie boven */
[data-thema=carbon] .hero h1 em{
  color:transparent;
  background-image:linear-gradient(105deg,#979895,#fff 46%,#8c8d8a);
  -webkit-background-clip:text;background-clip:text;
}
[data-thema=carbon] .hero__lood{color:var(--c-bone2)}
[data-thema=carbon] .hero__cijfer{color:var(--c-mute)}
[data-thema=carbon] .hero__cijfer b{color:var(--c-bone)}

/* de drie bewijsregels onder elkaar met een rond badge-vinkje */
[data-thema=carbon] .bewijs{display:grid;gap:13px;margin-top:28px;color:var(--c-bone2)}
[data-thema=carbon] .bewijs span{gap:13px;font-size:.96rem}
[data-thema=carbon] .bewijs svg{
  width:26px;height:26px;padding:3px;border-radius:999px;
  background:var(--c-glans);fill:var(--c-ink);
}

[data-thema=carbon] .dia{
  border-radius:var(--rond-l);border:1px solid var(--c-lijn);
  height:clamp(400px,50vw,580px);
  box-shadow:0 40px 84px -32px rgba(0,0,0,.95);
}
/* het schuine blok achter de foto is in deze stijl een vierkant in de hoek */
[data-thema=carbon] .hero__beeld::after{
  right:-20px;bottom:-20px;width:11rem;height:11rem;border-radius:var(--rond-l);
  background:linear-gradient(105deg,#2a2b29,#5c5d59 48%,#2a2b29);
}
[data-thema=carbon] .dia__pijl{background:rgba(20,21,20,.6);border-color:var(--c-lijn)}
[data-thema=carbon] .dia__pijl:hover{background:rgba(20,21,20,.88);border-color:rgba(255,255,255,.7)}

/* ---------- diensten: icoonkaart, geen foto ----------
   Verzoek Armando 06-10-2026, naar het voorbeeld van MHA: een icoontegel,
   de kop eronder en twee regels tekst. De foto blijft in het HTML staan
   (Midnight draagt hem) maar is hier verborgen; de kaart is daardoor ook
   niet aanklikbaar, dat regelt site.js. */
[data-thema=carbon] .dienst{
  background:var(--c-ink3);border-color:var(--c-lijn);color:var(--c-bone);
  padding:26px 26px 28px;cursor:default;
}
[data-thema=carbon] .dienst:hover{
  transform:translateY(-4px);border-color:rgba(255,255,255,.55);
  box-shadow:0 26px 48px -26px rgba(0,0,0,.85);
}
[data-thema=carbon] .dienst:focus-visible{outline-color:var(--c-bone)}
[data-thema=carbon] .dienst img{display:none}
[data-thema=carbon] .dienst__tekst{padding:0}
[data-thema=carbon] .dienst h3{margin-bottom:10px;font-size:1.3rem}
[data-thema=carbon] .dienst p{color:var(--c-bone2)}
[data-thema=carbon] .dienst .tegel{
  display:inline-flex;margin-bottom:20px;
}
[data-thema=carbon] .dienst .tegel svg{
  width:32px;height:32px;
  fill:none;stroke:var(--c-bone);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

[data-thema=carbon] .slot{
  margin-top:16px;padding:24px 28px;
  background:var(--c-ink3);border:1px solid var(--c-lijn);color:var(--c-bone);
}
[data-thema=carbon] .slot p{color:var(--c-bone2)}
[data-thema=carbon] .slot strong{color:var(--c-bone)}

/* ---------- icoontegel: in Midnight onzichtbaar, hier de drager ----------
   Geen omlijsting meer (verzoek Armando 06-10-2026): het icoon staat los,
   de maat van de tegel blijft staan zodat rijen en kaarten uitgelijnd
   blijven. Icoon is daarom groter, anders zweeft hij in het niets. */
[data-thema=carbon] .tegel{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border:0;background:none;
}
[data-thema=carbon] .tegel svg{width:30px;height:30px;fill:var(--c-bone)}

/* ---------- waar we werken: drie kaarten, geen haarlijnraster ---------- */
/* In Midnight zijn dit roosters met haarlijnen, geknipt op een ronde hoek.
   Hier zijn het losse kaarten die bij hover optillen, dus het knippen moet
   eraf: anders zaagt het de schaduw en de opgetilde rand af. */
[data-thema=carbon] .inzet,
[data-thema=carbon] .feiten,
[data-thema=carbon] .stappen,
[data-thema=carbon] .contact__blok{overflow:visible;border-radius:0}
[data-thema=carbon] .inzet{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  background:none;border:0;
}
[data-thema=carbon] .inzet>div{
  background:var(--c-ink3);border:1px solid var(--c-lijn);border-radius:var(--rond-m);padding:26px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
[data-thema=carbon] .inzet>div:hover{
  transform:translateY(-4px);border-color:rgba(255,255,255,.55);
  box-shadow:0 26px 48px -26px rgba(0,0,0,.85);
}
[data-thema=carbon] .inzet .tegel{display:inline-flex;margin-bottom:18px}
[data-thema=carbon] .inzet p{color:var(--c-bone2)}

/* ---------- over ons ---------- */
[data-thema=carbon] .over__beeld{position:relative}
[data-thema=carbon] .over__beeld::before{
  content:"";position:absolute;right:-20px;bottom:-20px;z-index:0;
  width:11rem;height:11rem;border-radius:var(--rond-l);
  background:linear-gradient(105deg,#2a2b29,#5c5d59 48%,#2a2b29);
}
[data-thema=carbon] .over__beeld img{
  position:relative;z-index:1;border-radius:var(--rond-l);border:1px solid var(--c-lijn);
  box-shadow:0 40px 84px -32px rgba(0,0,0,.95);
}
[data-thema=carbon] .feiten{
  gap:12px;margin-top:28px;background:none;border:0;
}
[data-thema=carbon] .feiten div{
  background:var(--c-ink3);border:1px solid var(--c-lijn);border-radius:var(--rond-m);padding:18px 20px;
}
[data-thema=carbon] .feiten b{color:var(--c-bone)}
[data-thema=carbon] .feiten span{color:var(--c-mute)}

/* ---------- werkwijze: tijdlijn in plaats van haarlijnraster ---------- */
[data-thema=carbon] .stappen{
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:28px;
  background:none;border:0;
}
[data-thema=carbon] .stap{background:none;padding:72px 0 0}
[data-thema=carbon] .stap::before{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:999px;
  display:grid;place-items:center;margin:0;
  background:var(--c-ink3);border:1px solid rgba(255,255,255,.3);
  font-size:1.3rem;color:var(--c-bone);
}
/* de doorlopende lijn waar de nummers op staan */
[data-thema=carbon] .stap::after{
  content:"";position:absolute;left:0;right:-28px;top:24px;height:1px;
  background:var(--c-lijn);z-index:-1;
}
[data-thema=carbon] .stap:last-child::after{right:0}
[data-thema=carbon] .stap p{color:var(--c-bone2)}

/* ---------- ons werk: mozaiek in een omlijste kaart ---------- */
[data-thema=carbon] .inzicht__beeld{
  gap:12px;padding:12px;border-radius:var(--rond-l);height:clamp(320px,33vw,420px);
  background:var(--c-ink3);border:1px solid var(--c-lijn);
}
[data-thema=carbon] .inzicht__beeld img{border-radius:var(--rond-m)}

/* ---------- beoordelingen ---------- */
[data-thema=carbon] .ws__intro{color:var(--c-bone2)}
[data-thema=carbon] .ws__intro a{color:var(--c-bone)}
[data-thema=carbon] .ws__merk{background:var(--wit);border-color:transparent}
[data-thema=carbon] .ws__pijl{background:var(--c-ink3);border-color:var(--c-lijn);color:var(--c-bone)}
[data-thema=carbon] .ws__pijl:hover{border-color:rgba(255,255,255,.6)}
[data-thema=carbon] .ws__lijst:focus-visible{outline-color:var(--c-bone)}
[data-thema=carbon] .review{background:var(--c-ink3);border-color:var(--c-lijn)}
[data-thema=carbon] .review p{color:var(--c-bone)}
[data-thema=carbon] .review__datum{color:var(--c-mute)}
[data-thema=carbon] .review footer{border-top-color:var(--c-lijn)}
[data-thema=carbon] .review__cirkel{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:var(--c-bone);
}
[data-thema=carbon] .review__wie b{color:var(--c-bone)}
[data-thema=carbon] .review__wie small{color:var(--c-mute)}
[data-thema=carbon] .review__meer{color:var(--c-bone)}

/* ---------- contact: drie aanklikbare kaarten ---------- */
[data-thema=carbon] .contact__blok{
  gap:12px;margin-bottom:24px;background:none;border:0;
}
[data-thema=carbon] .contact__blok a{
  background:var(--c-ink3);border:1px solid var(--c-lijn);border-radius:var(--rond-m);padding:18px 20px;
  transition:border-color .15s,transform .15s;
}
[data-thema=carbon] .contact__blok a:hover{
  background:var(--c-ink3);border-color:rgba(255,255,255,.55);transform:translateY(-2px);
}
[data-thema=carbon] .contact__blok .tegel{width:40px;height:40px}
[data-thema=carbon] .contact__blok .tegel svg{width:26px;height:26px}
[data-thema=carbon] .contact__blok .rij--wa .tegel svg{fill:var(--wa)}
[data-thema=carbon] .contact__blok small{color:var(--c-mute)}
[data-thema=carbon] .contact__blok strong{color:var(--c-bone)}
[data-thema=carbon] .gebied{color:var(--c-bone2)}
[data-thema=carbon] .gebied b{color:var(--c-bone)}

/* ---------- formulier als eigen kaart ---------- */
[data-thema=carbon] form{
  background:var(--c-ink3);border:1px solid var(--c-lijn);border-radius:var(--rond-l);
  padding:clamp(22px,3vw,32px);
}
[data-thema=carbon] .form__kop{color:var(--c-bone)}
[data-thema=carbon] label{color:var(--c-mute)}
[data-thema=carbon] input,
[data-thema=carbon] textarea,
[data-thema=carbon] select{
  background:var(--c-ink2);border:1px solid var(--c-lijn);border-radius:var(--rond-s);color:var(--c-bone);
}
[data-thema=carbon] input:focus,
[data-thema=carbon] textarea:focus,
[data-thema=carbon] select:focus{border-color:rgba(255,255,255,.7)}
[data-thema=carbon] select option{background:var(--c-ink2)}
[data-thema=carbon] input[type=file]::file-selector-button{
  border-radius:999px;border-color:var(--c-lijn);color:var(--c-bone);
}

/* ---------- voet ---------- */
[data-thema=carbon] .voet{
  background:transparent;color:var(--c-mute);border-top-color:var(--c-lijn);
}
[data-thema=carbon] .voet a{color:var(--c-bone2)}
[data-thema=carbon] .voet a:hover{color:var(--c-bone)}
[data-thema=carbon] .voet__onder{border-top-color:var(--c-lijn)}

/* ---------- projecten ---------- */
[data-thema=carbon] .filter{background:var(--c-ink3);border-color:var(--c-lijn);color:var(--c-bone2)}
[data-thema=carbon] .filter:hover{border-color:rgba(255,255,255,.55)}
[data-thema=carbon] .filter[aria-pressed=true]{background:var(--c-bone);border-color:var(--c-bone);color:var(--c-ink)}
[data-thema=carbon] .galerij figure{
  background:var(--c-ink3);border:1px solid var(--c-lijn);border-radius:var(--rond-m);overflow:hidden;
}
[data-thema=carbon] .galerij figcaption{color:var(--wit)}

/* ---------- cookiemelding en plaatspagina's ---------- */
[data-thema=carbon] .koek{
  background:var(--c-ink3);border-color:var(--c-lijn);color:var(--c-bone);
}
[data-thema=carbon] .koek p{color:var(--c-bone2)}
[data-thema=carbon] .koek b,
[data-thema=carbon] .koek a{color:var(--c-bone)}
[data-thema=carbon] .lok{color:var(--c-bone)}
[data-thema=carbon] .lok__lood{color:var(--c-bone2)}
[data-thema=carbon] .form--kaart{background:var(--c-ink3);border-color:var(--c-lijn)}
[data-thema=carbon] .plaatsen a{border-color:var(--c-lijn);color:var(--c-bone2)}
[data-thema=carbon] .plaatsen a:hover{border-color:rgba(255,255,255,.6);color:var(--c-bone)}
[data-thema=carbon] .voet__plaatsen p{color:var(--c-mute)}

@media (max-width:980px){
  [data-thema=carbon] .dia{height:clamp(320px,62vw,460px)}
  [data-thema=carbon] .stap::after{display:none}
}
@media (max-width:720px){
  [data-thema=carbon] .hero__beeld::after{width:7.5rem;height:7.5rem}
  [data-thema=carbon] .over__beeld::before{width:7.5rem;height:7.5rem}
  /* Carbon zet .bewijs op zijn eigen marge; op de telefoon staan de vinkjes
     boven de knoppen en moet die marge aan de onderkant zitten */
  [data-thema=carbon] .hero__tekst>.bewijs{margin:0 0 24px}
}