/* ==========================================================================
   Seitenspezifische Styles „Monatliches Online-Seminar“
   Grundlage: PAGE_SPEC_ONLINE_SEMINAR.md (Messwerte der Live-Seite)
   Globale Werte und wiederverwendete Komponenten kommen aus design-system.css.
   ========================================================================== */

/* ---------- Kopfzeile ---------- */
/* .site-header__inner, __logo, __nav, __toggle etc. kommen vollständig aus
   design-system.css – hier ist nichts Seitenspezifisches nötig. */

/* ---------- Großer Fließtext außerhalb von Karten ----------
   Auf dieser Seite sind Absätze und Listen außerhalb von Boxen/Callouts
   in Lead-Größe (1,25 em) gesetzt statt in der Basisgröße. */
.lead {
  font-size: var(--font-size-lead);
  line-height: 1.6;
}
.lead.list li { padding-left: 0.32em; } /* Aufzählungszeichen bleibt proportional zum größeren Text */

/* ---------- 4 · 1. Körperbewusstsein (Bild rechts, Text fließt daneben) ---------- */
.pillar__image {
  float: right;
  width: 37.78%;                       /* 391 / 1035 */
  margin: var(--column-gap) 0 var(--space-paragraph) var(--column-gap);
}
.pillar__intro,
.pillar__list {
  max-width: 58.55%;                   /* 606 / 1035 – Breite neben dem Bild, wie gemessen;
                                           die Listenpunkte selbst werden durch das eigene
                                           Padding von .list nochmals schmaler (wie im Original). */
}
.pillar__list { margin-bottom: calc(1.6 * var(--font-size-base)); }

/* ---------- 5 / 6 · Kopf-Paar (Überschrift/Bild bzw. Bild/Text) ---------- */
.pillar__head {
  margin-bottom: var(--column-gap);
}

.pillar__head h2 { margin-bottom: 0; }

/* ---------- 7 · Display-Titel „Dieses Seminar ist für dich“ ---------- */
.for-you__title {
  margin-bottom: calc(2 * var(--font-size-base));
}

/* ---------- Mobile (< 768 px) ---------- */
@media (max-width: 767px) {
  .pillar__image {
    float: none;
    width: 100%;
    margin: 0 0 var(--space-paragraph);
  }
  .pillar__intro,
  .pillar__list {
    max-width: none;
  }
  /* Live-Seite: Bild steht im Quelltext nach Absatz/Liste, erscheint bei
     Mobile also unterhalb statt (wie im Quelltext dieser Seite) darüber. */
  .pillar-1__inner {
    display: flex;
    flex-direction: column;
  }
  .pillar-1__inner .pillar__image {
    order: 3;
  }
}