:root {
  --evival-navy: #112F58;
  --evival-green: #56AF31;
  --evival-text: #4F4E4E;

  /* Zuordnung zu den bestehenden Komponenten */
  --ink: var(--evival-text);
  --blue: var(--evival-green);
}

body {
  color: var(--evival-text);
}

/* Überschriften sind grundsätzlich dunkelblau, nie grau. */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--evival-navy);
}

/* Auf Markenflächen werden Überschriften weiß; Akzente bleiben grün. */
.hero h1,
.hero h2,
.hero h3,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
footer h1,
footer h2,
footer h3,
.footer-grid h3 {
  color: #fff;
}

.experience-tile h2,
.opportunity-tile h2 {
  color: #fff;
}

h1 em,
h2 em,
h3 em,
h1 .accent,
h2 .accent,
h3 .accent {
  color: var(--evival-green);
}

.hero,
.section-dark,
footer {
  background-color: var(--evival-navy);
}

.hero-bg {
  background:
    linear-gradient(90deg, rgba(17, 47, 88, .97) 0%, rgba(17, 47, 88, .84) 48%, rgba(17, 47, 88, .18) 100%),
    url("assets/images/hero-ai.jpg") center right / cover no-repeat;
}

.hero::after {
  background: radial-gradient(circle at 72% 44%, rgba(86, 175, 49, .14), transparent 30%);
}

.hero h1 em,
.webinar h2 span,
.potential h2 i,
.footer-cta em {
  color: var(--evival-green);
}

.hero-orbit {
  border-color: rgba(86, 175, 49, .25);
}

.button-dark {
  background: var(--evival-navy);
  border-color: var(--evival-navy);
}

.nav-cta::after {
  content: "↗";
  margin-left: 14px;
  font-size: 14px;
}

.testimonials .section-head h2 {
  color: var(--evival-green);
}

.mobile-nav {
  background: var(--evival-navy);
}

.blog-hero h1 {
  color: #fff;
}

.blog-hero h1 em {
  color: var(--evival-green);
}

.footer-membership-logo {
  margin-top: 18px;
}

/* Blogseiten verwenden denselben zentrierten Sticky-Header wie die Unterseiten. */
.blog-page .site-header,
.blog-page .site-header.header-scrolled {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: 104px;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  color: var(--evival-navy);
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #dbe3e9;
  box-shadow: 0 10px 30px rgba(0, 26, 59, .06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.blog-page .site-header .brand {
  display: block;
  flex: 0 0 154px;
  width: 154px;
  height: 60px;
}

.blog-page .site-header .brand img {
  width: 154px;
  height: 60px;
  object-fit: contain;
  object-position: left center;
  content: url("assets/images/evival_Logo_black.svg");
}

.blog-page .desktop-nav {
  gap: 42px;
  font-family: "IBM Plex Sans Condensed Local", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .12em;
}

.blog-page .desktop-nav a:not(.nav-cta)::after {
  background: var(--evival-navy);
}

.blog-page .nav-cta {
  border-color: rgba(0, 26, 59, .35);
  background: transparent;
  color: var(--evival-navy);
}

.blog-page .nav-cta::after {
  content: "↗";
  margin-left: 14px;
  font-size: 14px;
}

.blog-page .menu-toggle:not(.open) span {
  background: var(--evival-navy);
}

.news-grid .news-card img {
  width: 100% !important;
  height: 420px !important;
  max-height: 420px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #1d365e;
}

@media (max-height: 650px) and (min-width: 901px) {
  .blog-page .blog-hero {
    padding-top: 125px;
    padding-bottom: 55px;
  }

  .blog-page .article-hero h1 {
    font-size: clamp(42px, 5vw, 68px);
  }
}

@media (max-width: 800px) {
  .mobile-nav {
    z-index: 19;
    width: 100vw;
    height: 100dvh;
    min-height: 100vh;
    color: #fff;
    padding: 96px 12vw 48px;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header:has(.menu-toggle.open),
  .content-page .site-header:has(.menu-toggle.open),
  .blog-page .site-header:has(.menu-toggle.open) {
    color: #fff;
    background: var(--evival-navy);
    border-bottom-color: transparent;
    box-shadow: none;
  }

  .content-page .site-header:has(.menu-toggle.open) .brand img,
  .blog-page .site-header:has(.menu-toggle.open) .brand img {
    content: url("assets/images/evival_Logo_white.svg");
  }

  .site-header .menu-toggle.open span {
    background: #fff;
  }

  .blog-page .site-header,
  .blog-page .site-header.header-scrolled {
    height: 82px;
    padding-inline: 28px;
  }

  .blog-page .site-header .brand {
    flex-basis: 145px;
    width: 145px;
  }

  .blog-page .site-header .brand img {
    width: 145px;
    height: 60px;
  }

  .news-grid .news-card img {
    height: 360px !important;
  }

  .hero-bg {
    background:
      linear-gradient(rgba(17, 47, 88, .72), rgba(17, 47, 88, .94)),
      url("assets/images/hero-ai.jpg") center / cover;
  }
}