/* =========================================================================
   PORTRAIT-SEITE (.pp-*) — Layout fuer Personen- und Inhaltsseiten
   Kein Landingpage-Muster: kein Verkaufs-Hero, keine CTA-Karten, keine
   Stoerer-Baender. Editoriale Lesestrecke: Textkopf, breites Auftaktbild,
   Vita als Datenliste, Kapitel im Fliesstext mit schmaler Randspalte.
   Additiv zu style.css und lp.css, aendert keine bestehende Seite.
   ========================================================================= */

/* ---------- Textkopf (statt Hero) ---------- */
.pp-head { padding-block: clamp(48px, 6vw, 96px) clamp(36px, 4vw, 64px); }
.pp-head h1 {
  font-size: var(--fs-d2);
  letter-spacing: -0.03em;
  margin: 18px 0 0;
  max-width: 24ch;
}
.pp-head__sub {
  margin-top: 18px;
  font-size: var(--fs-h3);
  color: var(--ink-soft);
  max-width: 34ch;
  line-height: 1.3;
}
.pp-head__intro { margin-top: clamp(24px, 3vw, 36px); max-width: 54ch; }

/* ---------- Breites Auftaktbild mit Bildzeile ---------- */
.pp-opener figure { overflow: hidden; }
.pp-opener img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}
.pp-opener figcaption {
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
@media (max-width: 700px) { .pp-opener img { aspect-ratio: 4 / 3; } }

/* ---------- Vita als ruhige Datenliste ---------- */
.pp-vita { background: var(--paper); padding-block: var(--sec-s); margin-top: var(--sec-s); }
.pp-vita h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: 16px; }
.pp-vita__list {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 88px);
}
.pp-vita__list li { border-top: 1px solid var(--rule); padding: 22px 0 24px; }
.v__k { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.v__v { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin-top: 8px; }
.v__d { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 8px; max-width: 46ch; }

/* ---------- Kapitel im Fliesstext ---------- */
.pp-chapter { padding-block: var(--sec-s); }
.pp-chapter + .pp-chapter { padding-top: 0; }
.pp-chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.pp-chapter h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; margin: 16px 0 0; }
.pp-chapter__text p { max-width: 64ch; font-size: var(--fs-lede); line-height: 1.6; }
.pp-chapter__text p + p { margin-top: 20px; }

.pp-side { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule-strong); padding-top: 20px; max-width: 64ch; }
.pp-side__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.pp-side ul { list-style: none; margin: 16px 0 0; padding: 0; }
.pp-side li { border-bottom: 1px solid var(--rule); padding: 12px 0; font-size: var(--fs-small); }

/* Kapitel mit Portrait statt Randspalte */
.pp-chapter--media .pp-chapter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.pp-chapter--media h2 { margin-bottom: clamp(18px, 2vw, 26px); }
.pp-chapter--media .pp-portrait { order: -1; }
.pp-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Ueberschriftsspalte der Kapitel */
.pp-chapter__head { position: relative; }
.pp-chapter__head h2 { max-width: 22ch; }

/* ---------- Haltungen als Hairline-Zeilen ---------- */
.pp-values { padding-block: var(--sec-s); }
.pp-values__list { margin-top: clamp(32px, 4vw, 56px); }
.pp-value {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 72px);
  border-top: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 36px) 0;
}
.pp-value:last-child { border-bottom: 1px solid var(--rule); }
.pp-value h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; }
.pp-value p { max-width: 58ch; color: var(--ink); }

/* ---------- Mehr von Alexander ---------- */
.pp-more { background: var(--paper); padding-block: var(--sec-s); }
.pp-more__list { margin-top: clamp(32px, 4vw, 56px); }
.pp-more__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 34px) 0;
}
.pp-more__row:last-child { border-bottom: 1px solid var(--rule); }
.pp-more__row h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; }
.pp-more__row p { max-width: 56ch; color: var(--ink-soft); }

/* ---------- Ruhiger Abschluss ---------- */
.pp-end { padding-block: var(--sec-s); }
.pp-end h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; margin-top: 16px; }
.pp-end p { margin-top: clamp(20px, 2.5vw, 28px); max-width: 62ch; font-size: var(--fs-lede); line-height: 1.6; }
.pp-end__links { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); }

/* ---------- Bildstrecke: Einleitungstext unter der Ueberschrift ---------- */
.pp-strip-intro { margin-top: 18px; max-width: 62ch; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .pp-vita__list { grid-template-columns: 1fr; }
  .pp-chapter__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .pp-chapter--media .pp-chapter__grid { grid-template-columns: 1fr; }
  .pp-chapter--media .pp-portrait { order: 0; max-width: 460px; }
  .pp-value { grid-template-columns: 1fr; gap: 12px; }
  .pp-more__row { grid-template-columns: 1fr; gap: 10px; }
  .pp-head h1, .pp-head__sub, .pp-chapter__head h2 { max-width: none; }
  .pp-chapter__head h2 { margin-bottom: clamp(16px, 3vw, 24px); }
}

/* ---------- Bildstrecke auf der Portrait-Seite: Pfeile zentriert unter der Strecke ---------- */
.pp-gallery .gallery__head { display: block; }
.pp-gallery__nav { justify-content: center; margin-top: clamp(28px, 3vw, 44px); }