/* ==========================================================================
   Block: Content-Section (H2 + Bild + Text)
   Bilder nach H2 werden VOLLSTÄNDIG angezeigt (kein Zuschneiden).
   ========================================================================== */
.content-section { margin-bottom: var(--space-section); }
.content-section__heading { margin-bottom: var(--space-h2-text); }

/* Bild nach H2 – vollständig sichtbar, nicht beschnitten */
.content-section__figure {
  margin: 0 0 var(--space-h2-text);
  text-align: center;
}
.content-section__figure img {
  width: auto;           /* kleine Grafiken nicht hochskalieren */
  max-width: 100%;       /* große Bilder passen in die Breite */
  height: auto;          /* volle Höhe, kein Crop */
  max-height: 540px;
  object-fit: contain;   /* nichts abschneiden */
  display: block;
  margin-inline: auto;
  clip-path: var(--clip-corner);
}

/* Plattform-Icons (Android/iOS) kleiner darstellen */
.content-section__figure img[src*="android.webp"],
.content-section__figure img[src*="ios.webp"] {
  max-width: 200px;
  max-height: 200px;
}

.content-section h3 { margin-top: 1.5rem; margin-bottom: var(--space-h3-text); }
.content-section p { margin-bottom: var(--space-paragraph); }

/* Auf Mobil: Bild oberhalb des Textes (bereits DOM-Reihenfolge H2 → Bild → Text) */
@media (min-width: 1441px) {
  /* Desktop: Bild folgt nach H2 (Standard-DOM-Reihenfolge) */
  .content-section__figure { max-width: 100%; }
}