/* ========================================================================== */
/* CONTENT ELEMENT – IMAGE (.content-image)                                   */
/* ========================================================================== */

.content-image {
  margin: var(--ms-section-gap) 0;

  /* Überschrift */
  > h2,
  > h3,
  > h4 {
    margin-bottom: var(--ms-space-5);
    color: var(--ms-dark);
    font-weight: var(--ms-fw-bold);
  }

  figure {
    margin: 0;
    padding: 0;
    display: inline-block; /* verhindert 100%-Breite */
    max-width: 100%;
    text-align: left;

    /* Bild-Link (Lightbox) */
    a {
      display: inline-block;
      border-radius: var(--ms-radius);
      overflow: hidden; /* für runde Ecken */
      transition: transform 0.25s ease, box-shadow 0.25s ease;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px var(--ms-shadow-medium);
      }
    }

    /* Bildunterschrift */
    figcaption {
      margin-top: var(--ms-space-3);
      font-size: var(--ms-font-size-sm);
      color: var(--ms-text);
      line-height: var(--ms-line-normal);
      opacity: 0.85;
    }
  }
}