/*==========================================================================
  Excellent Training — brand layer
  Laadt NA style.css en herbrandt het Hostily-template naar de huisstijl
  van Excellent Training. Bevat ook de nieuwe componenten voor de demo.
  Kleuren komen uit de live Avada-theming van excellent-training.nl.
==========================================================================*/

:root {
  /* Merk: diep smaragd. Het frisse #8BC34A van de huidige site,
     verdiept tot een tint die luxe leest i.p.v. eco. */
  --brand-green: #0f4c3a;
  --brand-green-2: #16624b;   /* hover */
  --brand-green-deep: #0a3428; /* footer */

  /* Accent: champagnegoud. Sluit aan op het goud waar het
     Hostily-template oorspronkelijk omheen ontworpen is. */
  --primary-color: #c6a664;   /* vlakken, lijnen, iconen op donker */
  --primary-ink: #8f7028;     /* goud als tekst op licht (contrast 4.6:1) */
  --gold-soft: #efe6d2;

  --heading-color: #101820;   /* bijna zwart */
  --body-color: #5a5f66;

  --surface-1: #faf8f3;       /* ivoor i.p.v. koel grijs */
  --surface-2: #f3eee3;
  --border-soft: #e7dfcf;     /* warme rand */
  --muted: #9a958a;

  --hero-deep: #0b2a22;       /* diepere variant van de herofoto */
  --radius: 2px;

  /* Kanaalwaarden zodat rgba() mee kan met het thema */
  --brand-rgb: 15, 76, 58;
  --accent-rgb: 198, 166, 100;

  /* Herofoto-overlay en kaartkoppen per thema instelbaar */
  --hero-gradient: linear-gradient(
    100deg,
    rgba(11, 42, 34, 0.97) 0%,
    rgba(11, 42, 34, 0.93) 38%,
    rgba(11, 42, 34, 0.6) 66%,
    rgba(11, 42, 34, 0.2) 100%
  );
  --card-top-1: #fbf8f0;
  --card-top-2: #f1e7d3;
}

/*=========================  Buttons  =========================*/
/* Smaragd vlak, wit label (9.5:1). Bij hover loopt het goud in. */
.theme-btn,
.theme-border-btn {
  background: var(--brand-green);
  color: #fff;
  border-radius: var(--radius);
  letter-spacing: 0.08em;
}

.theme-btn::before,
.theme-border-btn::before,
.theme-btn::after,
.theme-border-btn::after {
  background: var(--primary-color);
}

.theme-btn:hover,
.theme-border-btn:hover {
  color: var(--heading-color);
}

.et-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: var(--radius);
  color: var(--primary-color);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.35s ease-out;
}

.et-btn-ghost:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--heading-color);
}

/*=========================  Header  =========================*/
/* Het beeldmerk heeft eigen kleuren en een doorzichtige achtergrond, dus
   hier geen filter: dat zou de groene ring wit maken. */
.header__area-menubar-left-logo img {
  max-height: 84px;
  width: auto;
}

/* Sticky balk in smaragd i.p.v. het bijna-zwart van het template. */
.header__sticky.header__sticky-sticky-menu .header__area {
  background: var(--brand-green-deep);
  border-bottom-color: rgba(var(--accent-rgb), 0.28);
}

.header__area-menubar-right-menu ul li a {
  font-size: 16px;
  padding: 42px 26px;
  /* "Wie zijn wij" mag niet "Wie Zijn Wij" worden */
  text-transform: none;
}

/*=========================  Hero  =========================*/
.et-hero {
  position: relative;
  z-index: 1;
  padding: 230px 0 0;
  background-color: var(--hero-deep);
  background-image: url(../img/et/hero-handen-schudden.jpg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.et-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-gradient);
}

.et-hero__content {
  max-width: 660px;
  padding-bottom: 110px;
}

.et-hero__eyebrow {
  display: inline-block;
  position: relative;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-color);
  padding-left: 52px;
  margin-bottom: 26px;
}

.et-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 2px;
  background: var(--primary-color);
}

.et-hero h1 {
  color: #fff;
  font-size: 66px;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 26px;
}

.et-hero h1 span {
  display: block;
  color: var(--primary-color);
}

.et-hero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 32px;
  max-width: 560px;
  margin-bottom: 40px;
}

.et-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/*----------  USP-balk onder de hero  ----------*/
.et-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.et-usp__item {
  padding: 34px 32px;
  border-right: 1px solid rgba(var(--accent-rgb), 0.22);
}

.et-usp__item:last-child {
  border-right: 0;
}

.et-usp__item i {
  display: block;
  font-size: 26px;
  color: var(--primary-color);
  margin-bottom: 16px;
}

.et-usp__item h6 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.et-usp__item p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}

/*=========================  Cursusaanbod  =========================*/
html {
  scroll-behavior: smooth;
}

.et-courses {
  background: var(--surface-1);
  scroll-margin-top: 110px;
}

.et-section-head {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}

.et-section-head .subtitle__one {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-ink);
  margin-bottom: 14px;
}

.et-section-head h2 {
  position: relative;
  font-size: 46px;
  line-height: 1.18;
  color: var(--heading-color);
  margin-bottom: 30px;
  padding-bottom: 24px;
}

.et-section-head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 62px;
  height: 2px;
  background: var(--primary-color);
}

.et-section-head p {
  color: var(--body-color);
  font-size: 16px;
  line-height: 30px;
  margin: 0;
}

/*----------  Filter  ----------*/
.et-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 42px 0 54px;
  padding: 0;
  list-style: none;
}

.et-filter li {
  cursor: pointer;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--body-color);
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 11px 26px;
  transition: all 0.3s ease-out;
  -webkit-user-select: none;
  user-select: none;
}

.et-filter li:hover {
  border-color: var(--primary-color);
  color: var(--primary-ink);
}

.et-filter li.active {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}

/*----------  Cursuskaart  ----------*/
.et-col.is-hidden {
  display: none;
}

.et-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s ease-out, box-shadow 0.35s ease-out,
    border-color 0.35s ease-out;
}

.et-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-color);
  box-shadow: 0 24px 48px rgba(16, 24, 32, 0.14);
}

.et-card__top {
  position: relative;
  overflow: hidden;
  padding: 32px 32px 26px;
  background: linear-gradient(135deg, var(--card-top-1) 0%, var(--card-top-2) 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.38);
}

.et-card__ghost {
  position: absolute;
  right: -14px;
  bottom: -34px;
  font-size: 128px;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.24);
  pointer-events: none;
}

.et-card__icon {
  position: relative;
  font-size: 34px;
  line-height: 1;
  color: var(--brand-green);
  margin-bottom: 20px;
}

.et-card__cat {
  position: relative;
  display: inline-block;
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

.et-card__flag {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  background: var(--primary-color);
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

.et-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 30px 32px 34px;
}

.et-card__body h4 {
  font-size: 22px;
  line-height: 1.3;
  color: var(--heading-color);
  margin-bottom: 14px;
}

.et-card__body > p {
  font-size: 15px;
  line-height: 27px;
  color: var(--body-color);
  margin-bottom: 22px;
}

.et-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.et-card__chips li {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-green);
  background: rgba(var(--brand-rgb), 0.07);
  border: 1px solid rgba(var(--brand-rgb), 0.14);
  border-radius: 999px;
  padding: 5px 14px;
}

.et-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--heading-color);
  transition: color 0.3s ease-out, gap 0.3s ease-out;
}

.et-card__link i {
  font-size: 12px;
  color: var(--primary-color);
}

.et-card__link:hover {
  color: var(--brand-green);
  gap: 16px;
}

/*----------  Afsluitende contactregel  ----------*/
.et-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin-top: 60px;
  padding: 38px 46px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--primary-color);
  border-radius: var(--radius);
}

.et-note p {
  margin: 0;
  font-size: 17px;
  line-height: 29px;
  color: var(--heading-color);
  max-width: 640px;
}

.et-note p span {
  color: var(--brand-green);
  font-weight: 700;
}

/*=========================  Footer  =========================*/
.et-footer {
  background: var(--brand-green-deep);
  padding: 80px 0 0;
}

.et-footer__logo img {
  max-height: 110px;
  width: auto;
  margin-bottom: 24px;
}

.et-footer p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 28px;
  max-width: 380px;
}

.et-footer h5 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 26px;
}

.et-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.et-footer ul li {
  margin-bottom: 12px;
}

.et-footer ul li a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  transition: color 0.3s ease-out;
}

.et-footer ul li a:hover {
  color: var(--primary-color);
}

.et-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.et-footer__mail i {
  color: var(--primary-color);
}

.et-footer__bottom {
  margin-top: 66px;
  padding: 26px 0;
  border-top: 1px solid rgba(var(--accent-rgb), 0.22);
  text-align: center;
}

.et-footer__bottom p {
  margin: 0 auto;
  max-width: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.et-footer__bottom a {
  color: rgba(255, 255, 255, 0.72);
}

.et-footer__bottom a:hover {
  color: var(--primary-color);
}

/*=========================  Demo-label  =========================*/
.et-flag {
  background: var(--heading-color);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 9px 16px;
}

.et-flag strong {
  color: var(--primary-color);
}

/*=========================  Responsive  =========================*/
@media (max-width: 1199px) {
  .et-hero h1 {
    font-size: 54px;
  }
  .et-usp {
    grid-template-columns: repeat(2, 1fr);
  }
  .et-usp__item:nth-child(2n) {
    border-right: 0;
  }
  .et-usp__item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
  }
}

@media (max-width: 991px) {
  .et-hero {
    padding-top: 190px;
    background-position: center center;
  }
  .et-hero::after {
    background: linear-gradient(
      100deg,
      rgba(20, 48, 46, 0.96) 0%,
      rgba(20, 48, 46, 0.88) 60%,
      rgba(20, 48, 46, 0.7) 100%
    );
  }
  .et-hero h1 {
    font-size: 44px;
  }
  .et-hero__content {
    padding-bottom: 80px;
  }
  .et-section-head h2 {
    font-size: 36px;
  }
  .et-note {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .et-hero {
    padding-top: 150px;
  }
  .et-hero h1 {
    font-size: 36px;
  }
  .et-hero__lead {
    font-size: 16px;
    line-height: 29px;
  }
  .et-usp {
    grid-template-columns: 1fr;
  }
  .et-usp__item {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
    padding: 26px 24px;
  }
  .et-section-head h2 {
    font-size: 30px;
  }
  .et-card__top,
  .et-card__body {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/*==========================================================================
  Pagina "Wie zijn wij"
==========================================================================*/

/* Header zonder herofoto eronder: eigen donkere ondergrond nodig. */
.et-header--solid {
  background: var(--brand-green-deep);
}

.et-pagehead {
  background: var(--brand-green-deep);
  padding: 210px 0 100px;
  text-align: center;
}

.et-pagehead .et-hero__eyebrow {
  padding-left: 0;
  margin-bottom: 18px;
}

.et-pagehead .et-hero__eyebrow::before {
  display: none;
}

.et-pagehead h1 {
  color: #fff;
  font-size: 60px;
  line-height: 1.1;
  margin-bottom: 22px;
}

.et-crumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--heading-font);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.et-crumbs li + li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin: 0 12px 5px 0;
  background: var(--primary-color);
  vertical-align: middle;
}

.et-crumbs a:hover {
  color: var(--primary-color);
}

/*----------  Intro  ----------*/
.et-intro__text .subtitle__one {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-ink);
  margin-bottom: 14px;
}

.et-intro__text h2 {
  font-size: 42px;
  line-height: 1.2;
  color: var(--heading-color);
  margin-bottom: 24px;
}

.et-intro__text p {
  font-size: 16px;
  line-height: 30px;
  color: var(--body-color);
  margin-bottom: 20px;
}

.et-intro__text .theme-btn {
  margin-top: 14px;
}

.et-intro__figure {
  position: relative;
  padding-left: 30px;
}

.et-intro__figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 34px;
  width: 3px;
  background: var(--primary-color);
}

.et-intro__figure img {
  width: 100%;
  border-radius: var(--radius);
}

.et-intro__badge {
  position: absolute;
  right: -10px;
  bottom: -26px;
  padding: 22px 30px;
  background: var(--brand-green);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.et-intro__badge strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 34px;
  line-height: 1;
  color: var(--primary-color);
}

.et-intro__badge span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/*----------  Waarden  ----------*/
.et-values {
  background: var(--surface-1);
}

.et-value {
  height: 100%;
  padding: 40px 34px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: transform 0.35s ease-out, box-shadow 0.35s ease-out,
    border-color 0.35s ease-out;
}

.et-value:hover {
  transform: translateY(-6px);
  border-color: var(--primary-color);
  box-shadow: 0 24px 48px rgba(16, 24, 32, 0.12);
}

.et-value__icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand-green);
  font-size: 26px;
}

.et-value h4 {
  font-size: 21px;
  color: var(--heading-color);
  margin-bottom: 14px;
}

.et-value p {
  font-size: 15px;
  line-height: 27px;
  color: var(--body-color);
  margin: 0;
}

/*----------  Aanpak  ----------*/
.et-approach__intro .subtitle__one {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-ink);
  margin-bottom: 14px;
}

.et-approach__intro h2 {
  font-size: 40px;
  line-height: 1.2;
  color: var(--heading-color);
  margin-bottom: 18px;
}

.et-approach__intro p {
  font-size: 16px;
  line-height: 30px;
  color: var(--body-color);
  margin: 0;
}

.et-steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.et-steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 34px 78px;
}

.et-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -4px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-ink);
  background: #fff;
}

.et-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 56px;
  bottom: 10px;
  width: 1px;
  background: var(--border-soft);
}

.et-steps h5 {
  font-size: 20px;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.et-steps p {
  font-size: 15px;
  line-height: 27px;
  color: var(--body-color);
  margin: 0;
}

/*----------  Afsluitende CTA  ----------*/
.et-cta {
  background: var(--brand-green-deep);
  padding: 80px 0;
}

.et-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.et-cta__inner .et-hero__eyebrow {
  margin-bottom: 16px;
}

.et-cta__inner h2 {
  font-size: 36px;
  line-height: 1.22;
  color: #fff;
  margin-bottom: 12px;
  max-width: 640px;
}

.et-cta__inner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

@media (max-width: 991px) {
  .et-pagehead {
    padding: 170px 0 80px;
  }
  .et-pagehead h1 {
    font-size: 44px;
  }
  .et-intro__text h2,
  .et-approach__intro h2 {
    font-size: 32px;
  }
  .et-intro__figure {
    padding-left: 0;
    margin-bottom: 40px;
  }
  .et-intro__figure::before {
    display: none;
  }
  .et-intro__badge {
    right: 16px;
    bottom: 16px;
  }
  .et-cta__inner h2 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .et-pagehead {
    padding: 140px 0 64px;
  }
  .et-pagehead h1 {
    font-size: 34px;
  }
  .et-value {
    padding: 32px 26px;
  }
  .et-steps li {
    padding-left: 64px;
  }
  .et-steps li::before {
    width: 44px;
    height: 44px;
  }
  .et-steps li:not(:last-child)::after {
    left: 22px;
    top: 48px;
  }
}

/*==========================================================================
  Kleurrichtingen
  Dennis twijfelt over de kleur, dus de demo draagt vier richtingen.
  Wisselen kan met de schakelaar rechtsonder of met ?theme=... in de URL.
  Elk thema overschrijft alleen tokens; geen enkele component verandert.
==========================================================================*/

/*----------  2. Marineblauw & goud — gezag, past bij de beveiligingsbranche  ----------*/
[data-theme="navy"] {
  --brand-green: #16304f;
  --brand-green-2: #1e4068;
  --brand-green-deep: #0e2135;

  --primary-color: #c9a227;
  --primary-ink: #866514;
  --gold-soft: #efe4c6;

  --heading-color: #0e1a26;
  --body-color: #566270;

  --surface-1: #f8fafc;
  --surface-2: #edf2f7;
  --border-soft: #dce4ee;
  --muted: #93a0af;

  --hero-deep: #0e2135;
  --brand-rgb: 22, 48, 79;
  --accent-rgb: 201, 162, 39;

  --hero-gradient: linear-gradient(
    100deg,
    rgba(14, 33, 53, 0.97) 0%,
    rgba(14, 33, 53, 0.94) 38%,
    rgba(14, 33, 53, 0.78) 66%,
    rgba(14, 33, 53, 0.52) 100%
  );
  --card-top-1: #f8fafd;
  --card-top-2: #e9f0f8;
}

/*----------  3. Huisstijl groen — hun eigen #8BC34A, op antraciet  ----------*/
[data-theme="groen"] {
  --brand-green: #4f7d22;
  --brand-green-2: #5e9329;
  --brand-green-deep: #1b2318;

  --primary-color: #8bc34a;
  --primary-ink: #4a7520;
  --gold-soft: #e4f0cf;

  --heading-color: #1a1f16;
  --body-color: #545a4e;

  --surface-1: #f8faf4;
  --surface-2: #eff4e6;
  --border-soft: #dfe7d2;
  --muted: #9aa090;

  --hero-deep: #16261c;
  --brand-rgb: 79, 125, 34;
  --accent-rgb: 139, 195, 74;

  --hero-gradient: linear-gradient(
    100deg,
    rgba(22, 38, 28, 0.96) 0%,
    rgba(22, 38, 28, 0.92) 38%,
    rgba(22, 38, 28, 0.62) 66%,
    rgba(22, 38, 28, 0.24) 100%
  );
  --card-top-1: #f7faf0;
  --card-top-2: #e9f2d9;
}

/*----------  4. Antraciet & amber — sluit aan op het Kennis-Kunde platform  ----------*/
[data-theme="amber"] {
  --brand-green: #b4531b;
  --brand-green-2: #d0691f;
  --brand-green-deep: #1e2125;

  --primary-color: #ef8f2c;
  --primary-ink: #a1541a;
  --gold-soft: #f7e3cb;

  --heading-color: #17191c;
  --body-color: #585d64;

  --surface-1: #faf8f6;
  --surface-2: #f4efe9;
  --border-soft: #e8ded4;
  --muted: #9c958c;

  --hero-deep: #1e2125;
  --brand-rgb: 180, 83, 27;
  --accent-rgb: 239, 143, 44;

  --hero-gradient: linear-gradient(
    100deg,
    rgba(30, 33, 37, 0.97) 0%,
    rgba(30, 33, 37, 0.94) 38%,
    rgba(30, 33, 37, 0.8) 66%,
    rgba(30, 33, 37, 0.56) 100%
  );
  --card-top-1: #fdf8f2;
  --card-top-2: #f7e9d8;
}

/*==========================================================================
  Kleurschakelaar — alleen voor de demo, hoort niet in de live site
==========================================================================*/
.et-themer {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: var(--heading-font);
}

.et-themer__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--heading-color);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: background 0.3s ease-out;
}

.et-themer__toggle:hover {
  background: var(--brand-green);
}

.et-themer__toggle i {
  color: var(--primary-color);
  font-size: 15px;
}

.et-themer__panel {
  width: 268px;
  margin-bottom: 14px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2);
}

.et-themer__panel h6 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--heading-color);
}

.et-themer__panel > p {
  margin: 0 0 16px;
  font-family: var(--body-font);
  font-size: 12px;
  line-height: 19px;
  color: var(--body-color);
}

.et-themer__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--body-color);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s ease-out;
}

.et-themer__opt:hover {
  background: var(--surface-2);
}

.et-themer__opt[aria-pressed="true"] {
  border-color: var(--primary-color);
  color: var(--heading-color);
}

.et-themer__sw {
  flex: 0 0 auto;
  width: 34px;
  height: 22px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767px) {
  .et-themer {
    right: 14px;
    bottom: 14px;
  }
  .et-themer__panel {
    width: calc(100vw - 28px);
    max-width: 300px;
  }
}


/*==========================================================================
  Logo

  Het logo dat Dennis heeft aangeleverd: hoge resolutie, en het wit is er
  uitgesneden. Daardoor is het witte plaatje eronder niet meer nodig en
  staat het beeldmerk gewoon op de donkere kop.

  De oranje variant staat hier; de blauwe (logo-blauw.png) leest beter op
  wit en bewaren we voor certificaten en drukwerk.
==========================================================================*/
.header__area-menubar-left-logo a.kk-logo,
.kk-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.kk-logo img {
  height: 56px;
  width: auto;
  max-height: none;
  display: block;
}

@media (max-width: 575px) {
  .kk-logo img { height: 44px; }
}