/* ===========================================================================
   Energie Install — energielabel.css
   Accent-laag bovenop style.css: EU energielabel-palet (A→G) als smaakvolle
   accenten om het eentonige groen te doorbreken (klantwens Emrah:
   "minder groen, meer energielabel-kleuren"). Plus subtiele animaties.
   Wijzigt style.css NIET. Geladen via <link> NA style.css.
   =========================================================================== */

/* ── 1. EU energielabel-tokens (A=donkergroen … G=rood) ─────────────────── */
:root{
  --label-a:#00A651;  /* A — donkergroen   */
  --label-b:#50B848;  /* B — groen         */
  --label-c:#BFD730;  /* C — limoen        */
  --label-d:#FFF200;  /* D — geel          */
  --label-e:#FCB814;  /* E — amber         */
  --label-f:#F37021;  /* F — oranje        */
  --label-g:#ED1C24;  /* G — rood          */
  --label-sweep:linear-gradient(90deg,
    var(--label-a) 0%, var(--label-b) 16%, var(--label-c) 33%,
    var(--label-d) 50%, var(--label-e) 66%, var(--label-f) 83%, var(--label-g) 100%);
}

/* ── 2. Utility: dunne A→G gradient-balk ────────────────────────────────── */
.label-bar{
  display:block;
  height:6px;
  border-radius:30px;
  background:var(--label-sweep);
  background-size:200% 100%;
  width:100%;
}
/* compacte variant als losse markering/scheidingslijn */
.label-bar--thin{height:4px}
.label-bar--inline{display:inline-block;width:72px;vertical-align:middle}

/* ── 3. Eyebrow — subtiele energielabel-markering ───────────────────────── */
/* dunne kleuraccent-rand links zonder de bestaande pill-stijl te breken */
.eyebrow{
  position:relative;
  border-left:3px solid var(--label-c);
  padding-left:13px;
}
.eyebrow::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  border-radius:30px;
  background:var(--label-sweep);
  opacity:.55;
}

/* ── 4. USP-iconen (.uspc .ic) — wisselende energielabel-tinten ─────────── */
/* tint-rotatie A→F zodat een rij USP-kaarten kleurvariatie krijgt,
   met zacht getinte achtergrond voor leesbaar contrast.                    */
.usp3 .uspc:nth-child(7n+1) .ic{color:var(--label-a);background:rgba(0,166,81,.12)}
.usp3 .uspc:nth-child(7n+2) .ic{color:var(--label-b);background:rgba(80,184,72,.14)}
.usp3 .uspc:nth-child(7n+3) .ic{color:#8aa30c;background:rgba(191,215,48,.20)}   /* C leesbaar gemaakt */
.usp3 .uspc:nth-child(7n+4) .ic{color:#b08a00;background:rgba(255,242,0,.22)}    /* D leesbaar gemaakt */
.usp3 .uspc:nth-child(7n+5) .ic{color:#c98708;background:rgba(252,184,20,.18)}   /* E */
.usp3 .uspc:nth-child(7n+6) .ic{color:var(--label-f);background:rgba(243,112,33,.14)}
.usp3 .uspc:nth-child(7n+7) .ic{color:var(--label-g);background:rgba(237,28,36,.12)}

/* ── 5. USP-kaart — gekleurde top-border (nth-child wisselt label-kleur) ── */
.usp3 .uspc{
  border-top:3px solid var(--label-b);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),
             box-shadow .28s, border-color .28s;
}
.usp3 .uspc:nth-child(7n+1){border-top-color:var(--label-a)}
.usp3 .uspc:nth-child(7n+2){border-top-color:var(--label-b)}
.usp3 .uspc:nth-child(7n+3){border-top-color:var(--label-c)}
.usp3 .uspc:nth-child(7n+4){border-top-color:var(--label-d)}
.usp3 .uspc:nth-child(7n+5){border-top-color:var(--label-e)}
.usp3 .uspc:nth-child(7n+6){border-top-color:var(--label-f)}
.usp3 .uspc:nth-child(7n+7){border-top-color:var(--label-g)}

/* ── 6. Prijs-/plankaarten — gekleurde top-border per kolom ─────────────── */
/* defensief: dekt gangbare prijs-kaart classes zodat ze klaarstaan        */
.price-card,.pricing-card,.prijs-card,.plan,.plan-card{
  border-top:3px solid var(--label-b);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
}
.price-card:nth-child(3n+1),.pricing-card:nth-child(3n+1),.prijs-card:nth-child(3n+1),
.plan:nth-child(3n+1),.plan-card:nth-child(3n+1){border-top-color:var(--label-a)}
.price-card:nth-child(3n+2),.pricing-card:nth-child(3n+2),.prijs-card:nth-child(3n+2),
.plan:nth-child(3n+2),.plan-card:nth-child(3n+2){border-top-color:var(--label-d)}
.price-card:nth-child(3n+3),.pricing-card:nth-child(3n+3),.prijs-card:nth-child(3n+3),
.plan:nth-child(3n+3),.plan-card:nth-child(3n+3){border-top-color:var(--label-f)}
.price-card:hover,.pricing-card:hover,.prijs-card:hover,.plan:hover,.plan-card:hover{
  transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,36,23,.14)
}

/* ── 7. Statcijfers (.stat b) — energielabel-accent ─────────────────────── */
/* generieke .stat b (buiten .stats) krijgt een warm amber-accent i.p.v.
   altijd-groen; .uspc-context cijfers idem.                                 */
.stat b{color:var(--label-e)}
.stat:nth-child(7n+1) b{color:var(--label-a)}
.stat:nth-child(7n+2) b{color:var(--label-b)}
.stat:nth-child(7n+3) b{color:#8aa30c}
.stat:nth-child(7n+4) b{color:#b08a00}
.stat:nth-child(7n+5) b{color:var(--label-e)}
.stat:nth-child(7n+6) b{color:var(--label-f)}
.stat:nth-child(7n+7) b{color:var(--label-g)}

/* ── 8. Animaties: fade-in-up ───────────────────────────────────────────── */
@keyframes ei-fade-in-up{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* reveal-pattern (idempotent t.o.v. style.css; integrator togglet .in) */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:.6s cubic-bezier(.2,.75,.25,1)}

/* losse fade-up utility (gebruikt keyframe direct bij .in) */
.fade-up{opacity:0}
.fade-up.in{animation:ei-fade-in-up .6s cubic-bezier(.2,.75,.25,1) forwards}

/* ── 9. Hover-lift op kaarten ───────────────────────────────────────────── */
.usp3 .uspc,.media-card{
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
}
.usp3 .uspc:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,36,23,.13);
}
.media-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(11,36,23,.16);
}

/* ── 10. Reduced-motion: alle animatie/transitie uit ────────────────────── */
@media (prefers-reduced-motion: reduce){
  .label-bar{background-size:100% 100%}
  .reveal,.fade-up{opacity:1!important;transform:none!important}
  .reveal.in,.fade-up.in{animation:none!important;transition:none!important}
  .usp3 .uspc,.media-card,
  .price-card,.pricing-card,.prijs-card,.plan,.plan-card{
    transition:none!important;
  }
  .usp3 .uspc:hover,.media-card:hover,
  .price-card:hover,.pricing-card:hover,.prijs-card:hover,.plan:hover,.plan-card:hover{
    transform:none!important;
  }
}

/* ═══ Contrast-fix (IT Live): energielabel-kleuren als TEKST leesbaar op lichte achtergrond (WCAG AA) ═══ */
/* Randen + iconen-op-tint blijven de felle labelkleuren; alleen TEKST krijgt een donkere, leesbare variant. */
.stat b{color:#8a6000}                  /* default was geel var(--label-e) #FCB814 */
.stat:nth-child(7n+1) b{color:#07703f}  /* A groen     */
.stat:nth-child(7n+2) b{color:#3a7a1e}  /* B lime      */
.stat:nth-child(7n+3) b{color:#5c6f06}  /* C geelgroen */
.stat:nth-child(7n+4) b{color:#756b00}  /* D geel      */
.stat:nth-child(7n+5) b{color:#8a6000}  /* E amber     */
.stat:nth-child(7n+6) b{color:#bf4f10}  /* F oranje    */
.stat:nth-child(7n+7) b{color:#c8121a}  /* G rood      */
/* Yellow-family USP-icoon op pale tint iets donkerder zodat het leesbaar blijft */
.usp3 .uspc:nth-child(7n+5) .ic{color:#9a6a00}