/* ===========================================================================
   SEITE: SPRECHER-PROFIL (S10) — Design-v5-Fassung (E3, NACHTRAG-EIN-KATALOG §9).
   Destilliert aus uebergabe-claude-design-4/EXTRAS/prototyp/css/seite-sprecher-detail.css
   (Abgabe-Stand 2026-07-28, Quell-md5 fdda957fcc162ecbc729dc1973095c1f) — unveraendert.
   ⚠ Die Seite laedt ZUSAETZLICH beitrag-detail.css (kopf_extra in module/sprecher.php) —
   das Design laedt dort seite-beitrag.css mit (.beitrag__rand/.beitrag__kopfaktionen/
   .kopiermeldung); kein Regel-Duplikat hier.
   =========================================================================== */
/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: SPRECHER-DETAIL
   =========================================================================== */

@layer seite {

  .person__pfad { color: var(--text-3); font-size: var(--txt-etikett); padding-block-start: var(--raum-6); }
  .person__pfad a { color: inherit; }

  .person {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--raum-6);
    align-items: start;
    padding-block: var(--raum-5) var(--raum-6);
  }

  /* Bildplatz: quadratisch, mit Initialen auf dem bildfesten Verlauf. Sobald
     ein Porträt vorliegt, ersetzt ein <img> den Inhalt ohne Layout-Änderung. */
  .person__bild {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--radius-l);
    background: var(--verlauf-bild);
    overflow: hidden;
  }
  /* PO-Befund 2026-09-05 (Buchholz 119×160): block-size:100% löste sich am aspect-ratio-Grid nicht auf, das
     Hochformat ragte 2×33 px über die Kachel und overflow:hidden nahm Stirn UND Kinn. Jetzt ein QUADRAT in
     Kachelbreite mit contain — ein Nicht-Quadrat (Alt-Bestand) steht vollständig auf dem getönten Grund;
     neue Uploads sind seit der Foto-Normierung ohnehin quadratisch und füllen die Kachel. */
  .person__bild img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: contain; display: block; }
  .person__initialen {
    color: var(--auf-tief);
    font-size: 3.25rem;
    font-weight: var(--gewicht-schwer);
    letter-spacing: var(--sperrung-titel);
  }

  .person__haupt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .person__name { max-inline-size: 24ch; }

  .person__aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-block-start: var(--raum-3); }

  .person__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    gap: var(--raum-7);
    align-items: start;
    padding-block-end: var(--raum-6);
  }
  /* Steht als erstes Element IN der Randspalte, nicht daneben: als eigenes
     Rasterelement wäre es ein drittes Kind und würde die zwei Spalten sprengen. */
  .rand-aktionen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); }

  .person__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); max-inline-size: var(--lese-max); color: var(--text-2); }
  /* Aufzählung der Biografie («- »-Zeilen, PO 2026-09-06) — basis.css nimmt jeder Liste die Punkte, hier kommen sie zurück. */
  .person__text ul { list-style: disc; padding-inline-start: 1.25rem; display: grid; gap: var(--raum-1); }

  @media (max-width: 60rem) {
    .person__spalten { grid-template-columns: 1fr; gap: var(--raum-6); }
  }

  @media (max-width: 34rem) {
    .person { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--raum-4); }
    .person__initialen { font-size: 1.75rem; }
  }
}