/**
 * @file
 * Profilseite Person: Hero (Foto links, Panel rechts), Beschreibung,
 * Zertifikate als gleich hohe Karten.
 * Kontraste: Weiß auf Römisch-Blau #1F3A5F 11,5:1,
 * Weiß auf Römisch-Rot #A82824 7:1, #595C61 auf Weiß 6,9:1,
 * #1A1A1A auf Weiß 17,4:1. Seitenhintergrund bleibt weiß, Steingrau nur
 * für hervorgehobene Abschnitte (z. B. Insights).
 */

:root {
  --roman-blue: #1F3A5F;
}

.person {
  --person-panel-bg: var(--roman-blue);
}
.person--red {
  --person-panel-bg: var(--roman-red, #A82824);
}

/* ---------- Hero ---------- */
.person-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1440px;
  margin: 0 auto 3.5rem;
}

/* Foto füllt die Fläche immer ganz aus, unabhängig von den Wrappern, die
   Drupal um das Medium legt. Ausschnitt oben-mittig, damit das Gesicht
   sichtbar bleibt. */
.person-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone-light, #EFEEEB);
}
/* Der erste Wrapper füllt die Fläche, alle weiteren Wrapper (Feld, Medium,
   picture) gehen auf volle Höhe und verlieren Theme-Abstände. */
.person-hero__media > * {
  position: absolute;
  inset: 0;
}
.person-hero__media div:not(.contextual),
.person-hero__media picture,
.person-hero__media article {
  height: 100%;
  margin: 0;
  padding: 0;
}
.person-hero__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.person-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  background: var(--person-panel-bg);
}
/* Alles im Panel weiß – auch gegen globale Farben für h1, p und a. */
.person .person-hero__panel,
.person .person-hero__panel * {
  color: #FFF;
}

.person .person-hero__name {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.person .person-hero__name::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 1.25rem;
  background: #FFF;
}

.person .person-hero__role {
  margin: 0;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
}

.person .person-hero__intro {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

.person .person-hero__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid #FFF;
  font-weight: 600;
  text-decoration: none;
}
.person .person-hero__link:hover,
.person .person-hero__link:hover * {
  background: #FFF;
  color: var(--person-panel-bg);
}
.person .person-hero__link:focus-visible {
  outline: 3px solid #FFF;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .person-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .person-hero__panel {
    padding: 3rem clamp(2rem, 5vw, 5rem);
  }
}

/* ---------- Inhalt unter dem Hero ---------- */
.person-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Fließtext bleibt für gute Lesbarkeit schmaler (ca. 75 Zeichen). */
.person-body__text:last-child {
  margin-bottom: 4rem;
}
.person-body__text {
  max-width: 860px;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ---------- Zertifikate ---------- */
/* Zertifikate als hervorgehobener Abschnitt in Pantheon-Marmor, über die
   volle Fensterbreite (gleicher Trick wie bei Insights), weiße Karten darauf. */
.person-certs {
  margin-top: 3.5rem;
  padding: 3.5rem 0;
  background: var(--stone, #D6D5D1);
  box-shadow: 0 0 0 100vmax var(--stone, #D6D5D1);
  clip-path: inset(0 -100vmax);
}
.person-certs__title {
  color: var(--ink, #1A1A1A);
}
.person-certs__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.75rem;
  background: var(--roman-red, #A82824);
}
.person-certs__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.person-certs__item {
  display: flex;
  margin: 0;
}

/* Karte: Logo oben, Text in der Mitte, Prüflink immer unten bündig –
   dadurch gleiche Abstände, auch bei langen Bezeichnungen. */
.cert {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem;
  background: #FFF;
  border: 1px solid var(--line, #E5E3DD);
  border-top: 3px solid var(--roman-red, #A82824);
}
.cert__logo {
  display: flex;
  align-items: center;
  height: 56px;
  margin-bottom: 1.25rem;
}
.cert__logo img {
  display: block;
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}
.cert__body {
  flex: 1 1 auto;
}
.cert__title {
  margin: 0 0 0.5rem;
  color: #1A1A1A;
  font-family: var(--font-body, serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  overflow-wrap: break-word;
  hyphens: manual;
}
.cert__meta {
  margin: 0;
  color: #595C61;
  font-size: 0.9375rem;
}
.cert__footer {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid #E5E3DD;
}
.cert__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: #1A1A1A;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.cert__link:hover {
  color: var(--roman-red, #A82824);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.cert__link:focus-visible {
  outline: 3px solid var(--roman-red, #A82824);
  outline-offset: 2px;
}

.ext-icon {
  flex: none;
}