/* ============================================
   PERSONAL DES MONATS
   Übersichtsseite (personal-des-monats.html). Orientiert sich an
   .problem-card (Aufbau, Hover) und .kategorie-card (Akzentlinie).
   In style.css einfügen, z. B. hinter den .kategorie-card-Regeln.
   ============================================ */

.personal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;

  margin-top: 32px;
}

.personal-karte {
  display: flex;
  flex-direction: column;

  padding: 22px 24px;

  /* Die Karten stehen in einer .section-alt -> heller Hintergrund */
  background: var(--color-bg);

  border: 1px solid var(--color-border);
  border-radius: 0;

  color: inherit;
  text-decoration: none;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

/* Falls die Liste mal in einer normalen Section steht */
.section:not(.section-alt) .personal-karte {
  background: var(--color-bg-alt);
}

.personal-karte:hover,
.personal-karte:focus-visible {
  transform: translateY(-4px);

  border-color: var(--color-accent);
  box-shadow: 0 12px 24px rgba(27, 35, 64, 0.08);
}

/* Monat/Jahr: gleiche Optik wie .buch-datum */
.personal-karte-monat {
  margin: 0 0 14px;

  color: var(--color-muted);

  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.personal-karte-name {
  color: var(--color-text);

  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
}

/* Akzentlinie wie bei .kategorie-card h3 */
.personal-karte-name::before {
  content: "";

  display: block;

  width: 42px;
  height: 2px;

  margin-bottom: 12px;

  background: var(--color-accent);
}

.personal-karte-stelle {
  margin-top: 10px;

  color: var(--color-muted);

  font-size: 0.92rem;
  line-height: 1.5;
}

/* Nur im Debug-Modus sichtbar: noch nicht veröffentlichte Einträge */
.personal-karte-entwurf {
  border-style: dashed;
  opacity: 0.75;
}

.personal-bild {
  margin: 24px 0 0;
}

.personal-bild img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;

  border: 1px solid var(--cover-border);
  box-shadow: var(--cover-shadow);
}