/* Landingpage Humanoide Robotik – ergänzt landingpage.css (gleicher Aufbau wie AI Operator).
   Neu: Hero mit Illustration statt Video, Einsatzszenarien als Textkarten. */

/* Hero: schwarze Fläche rechts; der Hintergrund der Illustration ist exakt --ink, deshalb fließt sie nahtlos in die Fläche */
.hr-hero__media { background: var(--ink); min-height: 677px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hr-hero__media img { display: block; width: 100%; max-width: 773px; height: auto; }
@media (max-width: 991px) {
  .hr-hero__media { min-height: 0; }
  .hr-hero__media img { max-width: 640px; }
}

/* Einsatzszenarien: Textkarten 2 × 2 */
.hr-szenarien__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.hr-szenario { background: var(--grey-50); padding: 48px 40px; display: grid; gap: 12px; align-content: start; }
@media (max-width: 767px) {
  .hr-szenarien__grid { grid-template-columns: 1fr; gap: 16px; }
  .hr-szenario { padding: 40px 20px; }
}

/* Begriffe, die nicht am Bindestrich umbrechen sollen */
.hr-nowrap { white-space: nowrap; }

/* Textlinks im Fließtext: jede Erwähnung des AI Operators führt auf dessen Landingpage.
   Ink + Cyan-Unterstrich (Kontrast auch auf --grey-50 sicher), Hover Cyan */
.hr-link { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--cyan); transition: color .2s ease; }
.hr-link:hover, .hr-link:focus-visible { color: var(--cyan-text); }
.feature-card--dark .hr-link, .hr-weg--dunkel .hr-link { color: var(--white); }
.feature-card--dark .hr-link:hover, .feature-card--dark .hr-link:focus-visible,
.hr-weg--dunkel .hr-link:hover, .hr-weg--dunkel .hr-link:focus-visible { color: var(--cyan); }

/* Zwei Wege der Zusammenarbeit (Robotikhersteller): Produktbaustein oder Implementierungspartner */
.hr-wege__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.hr-weg { background: var(--grey-50); padding: 56px 48px; display: flex; flex-direction: column; gap: 24px; }
.hr-weg--dunkel { background: var(--ink); color: var(--white); }
.hr-weg__text { color: var(--grey-600); }
.hr-weg--dunkel .hr-weg__text { color: rgba(255, 255, 255, .78); }
.hr-weg .lp-checks { gap: 16px; margin-top: 8px; }
.hr-weg .lp-checks li { font-size: 18px; line-height: 26px; align-items: flex-start; }
.hr-weg .lp-checks__icon { margin-top: 4px; }
@media (max-width: 991px) { .hr-wege__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .hr-weg { padding: 40px 20px; } .hr-wege__grid { gap: 16px; } }