/* =========================================================================
   /leistungen/individuelle-systeme – Feinschliff auf Startseiten-Niveau
   Ergänzt individual-systems.css; alle Regeln sind auf .sys-page begrenzt.
   ========================================================================= */

/* ---------- Hero: kein leerer Block unter dem Inhalt ---------- */
.sys-page .sys-reference-hero { min-height: 0; padding: 72px 0 96px; }
.sys-page .sys-reference-hero .home-hero__media-shell { border-radius: 28px; box-shadow: 0 40px 80px -36px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .04); }

/* ---------- Section-Kicker wie die Eyebrows der Startseite ---------- */
.sys-page :is(.sys-human-balance__head, .sys-ai-cases__head, .sys-responsible-ai__head, .sys-economic-value__head, .sys-process-path__head) p:first-child,
.sys-page .sys-economic-value__content > p,
.sys-page .sys-process-path__steps > p {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.24;
  text-transform: none;
}
.sys-page :is(.sys-human-balance__head, .sys-ai-cases__head, .sys-responsible-ai__head) > p,
.sys-page .sys-process-path__head > p { color: var(--text-secondary); font-size: 17px; line-height: 1.47; }

/* ---------- Blaues Band „Die beste Lösung …“ ---------- */
.sys-page .sys-human-balance__cta {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy link" "steps note";
  gap: 32px 48px;
  padding: 48px 56px;
  border-radius: 28px;
}
.sys-page .sys-human-balance__cta > div { grid-area: copy; }
.sys-page .sys-human-balance__cta > ol { grid-area: steps; }
.sys-page .sys-human-balance__cta > a { grid-area: link; align-self: center; }
.sys-page .sys-human-balance__cta > p { grid-area: note; align-self: center; }
.sys-page .sys-human-balance__cta small { font-size: 13px; }
.sys-page .sys-human-balance__cta h3 { margin: 10px 0 8px; font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; line-height: 1.12; }
.sys-page .sys-human-balance__cta p { font-size: 15px; line-height: 1.45; }
.sys-page .sys-human-balance__cta li { font-size: 14px; }
.sys-page .sys-human-balance__cta > a { padding: 13px 22px; font-size: 15px; font-weight: 400; }
.sys-page .sys-human-balance__cta > p strong { font-size: 15px; }
.sys-page .sys-human-balance__cta > p small { font-size: 13px; }

/* ---------- „Was konkret einfacher wird“ ---------- */
.sys-page .sys-economic-value__panel { border-radius: 28px; }
.sys-page .sys-economic-value__content h3 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.015em; }
.sys-page .sys-economic-value__content li span { color: var(--blue); font-size: 13px; font-weight: 600; }
.sys-page .sys-economic-value__content li strong { color: var(--text); font-size: 17px; font-weight: 600; line-height: 1.3; }

/* ---------- Ablauf ---------- */
.sys-page .sys-process-path__image { border-radius: 28px; }
.sys-page .sys-process-path__steps li span { color: var(--blue); font-size: 13px; font-weight: 600; }
.sys-page .sys-process-path__steps h3 { color: var(--text); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.sys-page .sys-process-path__steps li p { color: var(--text-secondary); font-size: 17px; line-height: 1.47; }
.sys-page .sys-process-path__steps aside { border-radius: 20px; }
.sys-page .sys-process-path__steps aside strong { font-size: 17px; }
.sys-page .sys-process-path__steps aside p { font-size: 15px; }

/* ---------- Abschluss ---------- */
.sys-page .sys-final-cta__shell { border-radius: 32px; }
.sys-page .sys-final-cta__copy p { color: var(--text-secondary); font-size: 19px; line-height: 1.47; }


@media (max-width: 734px) {
  .sys-page .sys-reference-hero { padding: 40px 0 64px; }
  .sys-page .sys-human-balance__cta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "steps" "link" "note"; padding: 32px 24px; border-radius: 24px; }
  .sys-page .sys-human-balance__cta > a { justify-self: stretch; }
  .sys-page .sys-economic-value__panel { border-radius: 24px; }
}