/**
 * eigengrund Personen – Personenkarten
 *
 * Nur --eg-*-Tokens aus dem Child-Theme. Bewusst --eg-bg-card (nicht --eg-card)
 * und --eg-text-faint (nicht --eg-muted): Nur diese stellt body.eg-dark um.
 *
 * Selektoren zweistufig (.eg-person-card .eg-person-card__…), weil die Theme-
 * Regel ".entry-content p" (0,1,1) sonst Größe, Farbe und Zeilenhöhe überschreibt.
 *
 * fonts.css lädt nur Newsreader 400 / 300 italic und Inter 400 / 500 –
 * daher keine Gewichte über 500.
 */

/* ── BASIS ─────────────────────────────────────────────────── */

.eg-person-card {
  background: var(--eg-bg-card);
  border: .5px solid var(--eg-border);
  border-radius: var(--eg-radius-sm);
  color: var(--eg-text);
  font-family: var(--eg-font-sans);
  transition: background var(--eg-transition-slow),
              border-color var(--eg-transition-slow);
}

.eg-person-card .eg-person-card__foto {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.eg-person-card .eg-person-card__name {
  margin: 0;
  font-family: var(--eg-font-serif);
  color: var(--eg-text);
  line-height: 1.2;
}
.eg-person-card .eg-person-card__name a { color: inherit; }
.eg-person-card .eg-person-card__name a:hover { color: var(--eg-amber); }

/* Wie .eg-label im Theme */
.eg-person-card .eg-person-card__label,
.eg-person-card .eg-person-card__rolle {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--eg-text-faint);
}
/* --eg-accent statt --eg-amber: Amber erreicht auf der Kartenfläche
   nur ~4,4:1 – zu wenig für 13px-Text. */
.eg-person-card .eg-person-card__rolle { color: var(--eg-accent); }

.eg-person-card .eg-person-card__link {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--eg-accent);
}
.eg-person-card .eg-person-card__link:hover { color: var(--eg-amber); }

/* ── FULL ──────────────────────────────────────────────────── */

.eg-person-card--full {
  padding: var(--eg-space-lg) var(--eg-space-md);
  margin: 0 0 var(--eg-space-md);
}

.eg-person-card--full .eg-person-card__kopf {
  display: flex;
  align-items: center;
  gap: var(--eg-space-md);
  margin-bottom: var(--eg-space-md);
}
.eg-person-card--full .eg-person-card__foto { width: 120px; height: 120px; }
.eg-person-card--full .eg-person-card__name {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: .35rem;
}

.eg-person-card .eg-person-card__fakten {
  display: grid;
  gap: var(--eg-space-sm);
  margin: 0;
}
.eg-person-card .eg-person-card__fakt {
  padding-top: var(--eg-space-sm);
  border-top: .5px solid var(--eg-border);
}
.eg-person-card .eg-person-card__text { margin: .35rem 0 0; }
.eg-person-card .eg-person-card__text p,
.eg-person-card .eg-person-card__liste {
  margin: 0 0 .5rem;
  font-size: 15px;
  line-height: 1.8;
  color: var(--eg-text-muted);
}
.eg-person-card .eg-person-card__text p:last-child,
.eg-person-card .eg-person-card__liste:last-child { margin-bottom: 0; }
.eg-person-card .eg-person-card__liste { padding-left: 1.25rem; }

.eg-person-card .eg-person-card__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--eg-space-xs) var(--eg-space-md);
  margin-top: var(--eg-space-md);
  padding-top: var(--eg-space-sm);
  border-top: .5px solid var(--eg-border);
}
.eg-person-card .eg-person-card__stand {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--eg-text-faint);
}

@media (max-width: 600px) {
  .eg-person-card--full { padding: var(--eg-space-md) var(--eg-space-sm); }
  .eg-person-card--full .eg-person-card__kopf {
    flex-direction: column;
    align-items: flex-start;
  }
  .eg-person-card--full .eg-person-card__foto { width: 96px; height: 96px; }
}

/* ── COMPACT ───────────────────────────────────────────────── */

.eg-person-card--compact {
  display: flex;
  align-items: flex-start;
  gap: var(--eg-space-sm);
  padding: var(--eg-space-md);
  margin: var(--eg-space-lg) 0 0;
  border-left: 2px solid var(--eg-amber);   /* wie .eg-card--accent */
}
.eg-person-card--compact .eg-person-card__foto { width: 64px; height: 64px; }
.eg-person-card--compact .eg-person-card__inhalt { min-width: 0; }
.eg-person-card--compact .eg-person-card__name {
  margin-top: .15rem;
  font-size: 20px;
  line-height: 1.3;
}
.eg-person-card--compact .eg-person-card__rolle {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eg-text-faint);
}
.eg-person-card--compact .eg-person-card__kurztext {
  margin: .5rem 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--eg-text-muted);
}
.eg-person-card--compact .eg-person-card__link {
  display: inline-block;
  margin-top: .5rem;
}

/* ── TEAM (Übersichtsseite) ────────────────────────────────── */

.eg-person-card--team {
  position: relative;           /* Bezugsrahmen für die klickbare Fläche */
  display: flex;
  flex-direction: column;
  gap: var(--eg-space-sm);
  height: 100%;                 /* gleich hohe Karten in einer Query-Loop-Rasterzeile */
  padding: var(--eg-space-md);
}
.eg-person-card--team .eg-person-card__foto { width: 112px; height: 112px; }
.eg-person-card--team .eg-person-card__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.eg-person-card--team .eg-person-card__name {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: .25rem;
}
.eg-person-card--team .eg-person-card__kurztext {
  margin: .5rem 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--eg-text-muted);
}
/* "Zum Profil" immer unten, auch bei unterschiedlich langen Kurztexten */
.eg-person-card--team .eg-person-card__link {
  margin-top: auto;
  padding-top: var(--eg-space-sm);
}

/* Ganze Karte klickbar: Die ::after-Fläche des Namens-Links deckt die Karte ab. */
.eg-person-card--team .eg-person-card__ganze-karte::after {
  content: "";
  position: absolute;
  inset: 0;
}
.eg-person-card--klickbar {
  transition: background var(--eg-transition),
              border-color var(--eg-transition);
}
/* Wie .eg-card:hover im Theme */
.eg-person-card--klickbar:hover {
  background: var(--eg-bg-disc);
  border-color: var(--eg-tag-b);
}
.eg-person-card--klickbar:hover .eg-person-card__name,
.eg-person-card--klickbar:hover .eg-person-card__link { color: var(--eg-amber); }

/* Tastatur-Fokus als Rahmen um die ganze Karte statt um den Namen –
   :focus-visible, damit nach einem Mausklick kein Rahmen stehen bleibt. */
.eg-person-card--klickbar:has(.eg-person-card__ganze-karte:focus-visible) {
  outline: 2px solid var(--eg-border-focus);
  outline-offset: 2px;
}
.eg-person-card--team .eg-person-card__ganze-karte:focus-visible { outline: none; }