/* Mikon Raab – gezielte Feinheiten vom 16.08.2026 */

/* 1. Startseite: echtes Portrait im Abschnitt „Mikon Raab“. */
.section-about .about-strip {
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}

.section-about .about-strip::before {
  content: "";
  display: block;
  min-height: 360px;
  background: #eadcc5 url("/images/mikon-raab-portrait-20260816.jpeg") center 18% / cover no-repeat;
  border: 1px solid var(--line, #d8d0c2);
}

.section-about .about-strip > div {
  align-self: center;
  min-width: 0;
}

/* 2. Über mich: das echte Portrait vollständig und ohne Mini-Mikon. */
.about-hero .about-portrait {
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.about-hero .about-portrait img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 18%;
}

/* 3. Personalentwicklung: lange Überschrift in derselben ruhigen Hierarchie. */
.page-hero.accent-personalentwicklung .page-hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .58fr);
  align-items: center;
}

.page-hero.accent-personalentwicklung .page-hero-inner > div {
  min-width: 0;
}

.page-hero.accent-personalentwicklung .display {
  max-width: 100%;
  font-size: clamp(3.4rem, 4.3vw, 4.7rem);
  line-height: .96;
  overflow-wrap: normal;
  word-break: normal;
}

.page-hero.accent-personalentwicklung .lede {
  max-width: 32rem;
}

/* 4. Recruiting: Teamplayer bleibt ausschließlich in „Abteilung Mensch“. */
.page-hero.accent-recruiting + section[aria-labelledby="highlight-title"] {
  display: none !important;
}

/* 5. Recruiting: erklärenden Standardsatz entfernen und Überschrift ausrichten. */
.page-hero.accent-recruiting ~ section .section-heading {
  grid-template-columns: minmax(0, 1fr);
}

.page-hero.accent-recruiting ~ section .section-heading > p {
  display: none !important;
}

/* 6. Recruiting: lange Mitarbeiterempfehlungs-Überschrift bleibt in der Karte. */
.page-hero.accent-recruiting ~ section .content-card,
.page-hero.accent-recruiting ~ section .content-card-body {
  min-width: 0;
}

.page-hero.accent-recruiting ~ section .compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-hero.accent-recruiting ~ section .content-card:has(a[href="/essays/mitarbeiterempfehlungen/"]) h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.9rem);
  line-height: 1.08;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.page-hero.accent-recruiting ~ section .content-card:has(a[href="/essays/mitarbeiterempfehlungen/"]) .content-card-body {
  padding-inline: clamp(20px, 2.25vw, 34px);
}

@media (max-width: 1100px) {
  .section-about .about-strip {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  }

  .section-about .about-strip > div:last-child {
    grid-column: 1 / -1;
  }

  .page-hero.accent-personalentwicklung .page-hero-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .section-about .about-strip {
    grid-template-columns: 1fr;
  }

  .section-about .about-strip > div:last-child {
    grid-column: auto;
  }

  .section-about .about-strip::before {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  .page-hero.accent-personalentwicklung .display {
    font-size: clamp(2.5rem, 11vw, 3.8rem);
    overflow-wrap: anywhere;
  }

  .page-hero.accent-recruiting ~ section .compact-grid {
    grid-template-columns: 1fr;
  }
}