/*
 * Baustein: Personen-Karte (Porträt mit Name/Rolle)
 * Setzt tokens/tokens.css voraus (oder eine Kopie davon).
 *
 * Foto als echtes <img> (lazy ladbar, alt-Text) statt CSS-Background;
 * der Bildausschnitt wird ins Bild gerechnet, das CSS bleibt schlank.
 * Ein Navy-Scrim von unten hält den weißen Text lesbar.
 *
 * Markup:
 *   <figure class="personen-karte">
 *     <img class="personen-karte__bild" src="portraet.webp"
 *          alt="Vorname Nachname, Rolle"
 *          loading="lazy" decoding="async" width="400" height="400">
 *     <figcaption class="personen-karte__text">
 *       <h3 class="personen-karte__name">Vorname Nachname</h3>
 *       <span class="personen-karte__rolle">Rolle</span>
 *     </figcaption>
 *   </figure>
 */

.personen-karte {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: 0;
  width: 400px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.personen-karte__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navy-Scrim von unten – hält den weißen Text lesbar */
.personen-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--farbe-navy) 0%,
    color-mix(in srgb, var(--farbe-blau) 70%, transparent) 20%,
    transparent 35%
  );
}

.personen-karte__text {
  position: relative;
  z-index: 1; /* über dem Scrim */
  padding: var(--space-3);
  color: var(--farbe-weiss);
}

.personen-karte__name {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--farbe-weiss);
}

.personen-karte__rolle {
  opacity: 0.85;
}