/* 4. Hero – Sans Serif, Original-Hintergrund und gerahmtes Foto */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 56px;
  align-items: start;
  padding-block: 64px 72px;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc((100vw - 100%) / -2);
  pointer-events: none;
  background: linear-gradient(rgb(4 14 20 / 40%), rgb(4 14 20 / 82%)),
    url('../../assets/images/hero/trihub-ribbon.webp') center / cover;
  opacity: .2;
}
.eyebrow {
  color: var(--quiet);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.65;
}
.hero-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  color: var(--muted);
  font-size: .6875rem;
  letter-spacing: .16em;
}
.tiny-line { width: 16px; height: 1px; flex-shrink: 0; background: var(--accent-warm); }
h1 {
  margin-block: 28px;
  font-size: clamp(2.75rem, 4.65vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.06;
}
h1 em { color: inherit; font: inherit; }
.hero-intro { max-width: 510px; color: rgb(255 255 255 / 74%); font-size: 1.125rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.hero-note { margin-top: 26px; color: var(--quiet); font-size: .875rem; }
.check { margin-right: 7px; color: rgb(255 255 255 / 72%); }
.hero-visual {
  position: relative;
  height: 570px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 2rem;
  background: var(--panel);
  box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
}
.hero-visual > img { width: 100%; height: 100%; border-radius: 1.4rem; object-position: center; }
.hero-visual figcaption {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  padding: 22px 24px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1.4rem;
  background: rgb(3 13 18 / 84%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-visual figcaption span { color: var(--quiet); font-size: .75rem; letter-spacing: .19em; }
.hero-visual figcaption p { margin-top: 10px; font-size: 1.25rem; font-weight: 500; line-height: 1.5; }
.image-tag {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1rem;
  background: rgb(3 13 18 / 78%);
  backdrop-filter: blur(12px);
  color: var(--muted);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-align: center;
}
.image-tag b { display: block; margin-top: 2px; color: #fff; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.values-strip { border-block: 1px solid var(--line); background: rgb(255 255 255 / 2%); }
.values-strip .shell { display: flex; justify-content: center; align-items: center; gap: 60px; padding-block: 22px; color: var(--muted); font-size: .875rem; }
.values-strip i { color: rgb(255 255 255 / 24%); font-size: .75rem; font-style: normal; }

/* 5. Vorteile und wiederkehrende Sektionsüberschriften */
.section { padding-block: 96px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 56px; margin-bottom: 44px; }
.section-heading h2 { margin-top: 16px; font-size: clamp(2rem, 3.1vw, 3rem); }
.section-heading > p { max-width: 350px; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.benefit-grid article { padding-top: 28px; border-top: 1px solid var(--line); }
.benefit-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: .875rem; background: rgb(255 255 255 / 4%); color: rgb(255 255 255 / 74%); font-size: 1.5rem; }
.benefit-grid h3 { margin-bottom: 14px; font-size: 1.25rem; }
.benefit-grid p { max-width: 365px; color: var(--muted); font-size: 1rem; }