/* =========================================================================
   background.css — Sektion „Hintergrund"
   ========================================================================= */

/* ---------- Image bleeding into the wave ----------------------------------- */

.col-image img { width: 100%; }

.col-image--bleed {
  margin: 0;
  align-self: end;
  margin-bottom: calc(-1 * var(--space-y) - var(--wave-height) + 1rem);
}

@media (min-width: 61rem) {
  /* The portrait is allowed to grow past its column and run into the wave. */
  .col-image--bleed img {
    width: min(125%, 40rem);
    max-width: none;
    margin-left: auto;
  }
}

@media (max-width: 60.9375rem) {
  .col-image--bleed { margin-bottom: calc(-1 * var(--space-y) - var(--wave-height) + .5rem); }
}

/* ---------- Workshop impressions ------------------------------------------- */

.impressions-track { margin-top: clamp(3rem, 6vw, 5rem); }

.impressions {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}

.impressions img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  filter: drop-shadow(0 10px 20px rgba(41, 78, 99, .14));
}