/* ================================================================
   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);
}
[data-thema=carbon] body{background:var(--c-ink);color:var(--c-bone)}

/* ---------- doorlopend canvas in plaats van losse vlakken ---------- */
[data-thema=carbon] .vak,
[data-thema=carbon] .vak--grijs,
[data-thema=carbon] .vak--zwart{
  background-color:var(--c-ink);color:var(--c-bone);
  padding:clamp(56px,6vw,88px) 0;
  position:relative;overflow:hidden;
}
[data-thema=carbon] .vak{
  background-image:radial-gradient(32rem 25rem at 88% -14%,rgba(255,255,255,.06),transparent 70%);
}
[data-thema=carbon] .vak:nth-of-type(even){
  background-image:radial-gradient(28rem 23rem at 6% 112%,rgba(255,255,255,.05),transparent 70%);
}
[data-thema=carbon] .vak>.binnen{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:var(--c-ink);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] .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 ---------- */
[data-thema=carbon] .hero{
  background-color:var(--c-ink);
  background-image:
    radial-gradient(30rem 26rem at 92% -12%,rgba(255,255,255,.075),transparent 70%),
    radial-gradient(24rem 22rem at -6% 108%,rgba(255,255,255,.05),transparent 70%);
}
[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:18px;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:18px;
  background:linear-gradient(105deg,#2a2b29,#5c5d59 48%,#2a2b29);
}
[data-thema=carbon] .hero__badge{
  left:-18px;bottom:-24px;border-radius:14px;
  background:rgba(36,37,36,.95);border-color:var(--c-lijn);
}
[data-thema=carbon] .hero__badge:hover{border-color:rgba(255,255,255,.6)}
[data-thema=carbon] .hero__badge b{color:var(--c-bone)}
[data-thema=carbon] .hero__badge small{color:var(--c-mute)}
[data-thema=carbon] .hero__badge-ws{border-left-color:var(--c-lijn)}

/* ---------- diensten: foto binnen de kaart in plaats van erachter ---------- */
[data-thema=carbon] .diensten{gap:16px}
[data-thema=carbon] .dienst{
  aspect-ratio:auto;border-radius:16px;align-items:stretch;flex-direction:column;
  background:var(--c-ink3);border:1px solid var(--c-lijn);
  padding:14px 14px 24px;
}
[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::after{display:none}
[data-thema=carbon] .dienst img{
  position:static;aspect-ratio:4/3;height:auto;border-radius:12px;margin-bottom:18px;
}
[data-thema=carbon] .dienst:hover img{transform:none}
[data-thema=carbon] .dienst__tekst{padding:0 12px}
[data-thema=carbon] .dienst h3{text-shadow:none;margin-bottom:10px}
[data-thema=carbon] .dienst p{color:var(--c-bone2);text-shadow:none;font-size:.95rem}

[data-thema=carbon] .slot{
  margin-top:16px;border-radius: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 ---------- */
[data-thema=carbon] .tegel{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:14px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);
}
[data-thema=carbon] .tegel svg{width:24px;height:24px;fill:var(--c-bone)}

/* ---------- waar we werken: drie kaarten, geen haarlijnraster ---------- */
[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:16px;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:18px;
  background:linear-gradient(105deg,#2a2b29,#5c5d59 48%,#2a2b29);
}
[data-thema=carbon] .over__beeld img{
  position:relative;z-index:1;border-radius:18px;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:14px;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:18px;height:clamp(320px,33vw,420px);
  background:var(--c-ink3);border:1px solid var(--c-lijn);
}
[data-thema=carbon] .inzicht__beeld img{border-radius:12px}

/* ---------- 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)}

/* ---------- 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:14px;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:44px;height:44px}
[data-thema=carbon] .contact__blok .tegel svg{width:21px;height:21px}
[data-thema=carbon] .contact__blok .rij--wa .tegel{
  border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.12);
}
[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:18px;
  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:10px;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:var(--c-ink);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:14px;overflow:hidden;
}
[data-thema=carbon] .galerij figcaption{color:var(--wit)}

@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}
}