.d35-section-hero-secondary {
  display: grid;
  grid-template-columns:
    minmax(var(--d35-gap), 1fr)
    minmax(0, 835px)
    minmax(18rem, 605px)
    minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--d35-color-dark, #000);
  color: var(--d35-color-surface);
}

.d35-section-hero-secondary--no-media {
  grid-template-columns:
    minmax(var(--d35-gap), 1fr)
    minmax(0, var(--d35-container-wide))
    minmax(var(--d35-gap), 1fr);
}

.d35-section-hero-secondary--no-media .d35-section-hero-secondary__content {
  grid-column: 2;
  padding-inline: 0;
}

.d35-section-hero-secondary__content {
  grid-column: 2;
  display: flex;
  align-items: center;
  min-width: 0;
}

.d35-section-hero-secondary__inner {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 46rem;
  padding-block: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
}

.d35-section-hero-secondary__preheading {
  color: color-mix(in srgb, var(--d35-color-surface) 86%, transparent);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
}

.d35-section-hero-secondary__heading {
  margin: 0;
  color: var(--d35-color-surface);
  font-size: clamp(1.75rem, 3.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
}

.d35-section-hero-secondary__body {
  max-width: 40rem;
  color: color-mix(in srgb, var(--d35-color-surface) 82%, transparent);
  font-size: 1rem;
  line-height: 1.75;
}

.d35-section-hero-secondary__body > :first-child {
  margin-top: 0;
}

.d35-section-hero-secondary__body > :last-child {
  margin-bottom: 0;
}

.d35-section-hero-secondary__media {
  grid-column: 3 / -1;
  aspect-ratio: 2 / 1;
  min-height: 100%;
  background: var(--d35-color-light);
  overflow: hidden;
}

.d35-section-hero-secondary__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  /* Rechte Bildkante bleibt immer bündig am Viewport-Rand und verliert nie
     Bildinfo: im Normalfall (2:1-Box, schmaleres 4:3-Bild) wird nur die Höhe
     symmetrisch beschnitten; streckt sich die Box höher als das Bildverhältnis,
     wird ausschließlich links weggenommen — nie rechts. */
  object-position: right center;
}

@media (max-width: 900px) {
  .d35-section-hero-secondary {
    grid-template-columns:
      minmax(var(--d35-gap), 1fr)
      minmax(0, var(--d35-container-wide))
      minmax(var(--d35-gap), 1fr);
  }

  .d35-section-hero-secondary__content {
    grid-column: 2;
    order: 2;
  }

  .d35-section-hero-secondary__media {
    grid-column: 1 / -1;
    order: 1;
    min-height: 18rem;
  }

  .d35-section-hero-secondary__inner {
    padding-block: 1.5rem;
    padding-right: 0;
  }
}