/* ==========================================================================
   Content-section block — H2 + Bild + Text, volle Blockbreite
   (BEM: content-section__element--modifier)
   Reihenfolge auf allen Breakpoints: H2 -> Bild -> Einleitung -> H3-Struktur
   ========================================================================== */

.content-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

/* minmax(0, 1fr) statt der impliziten "auto"-Spurbreite ist entscheidend:
   ohne das würde ein breites Kind (z. B. eine Tabelle mit min-width) die
   Grid-Spur selbst aufblähen und die ganze Seite seitlich aufreißen, statt
   nur innerhalb seiner eigenen Box zu scrollen. */
.content-section__media,
.content-section__body {
  min-width: 0;
}

.content-section__media img {
  /* Kein fest erzwungenes aspect-ratio + object-fit: contain mehr — das
     erzeugte bei Bildern mit abweichendem Seitenverhältnis große leere
     Balken oben/unten. Das Bild wird stattdessen in seiner natürlichen
     Proportion angezeigt: volle Breite, Höhe automatisch, nichts
     abgeschnitten und keine leeren Flächen. */
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.content-section__body h3 {
  margin-top: var(--space-lg);
}

.content-section__body ul,
.content-section__body ol {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-paragraph) 0;
  padding-left: var(--space-lg);
}

.content-section__body ul {
  list-style: disc;
}

.content-section__body ol {
  list-style: decimal;
}

.content-section__body a {
  color: var(--color-heading-gold);
  text-decoration: underline;
}